icon fonts
iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/ https://icomoon.io/
最近的项目使用了图标库,使我对小小的图标有了更深一步的认识。刚开始项目使用了fontawesome图标库,但由于很多跟UI设计的独特图标不一致,最终决定做一个本项目的专用图标库。一段时间内两个图标库会共存,以后逐步替换成自己的图标库。
在阿里iconfont上传ui的svg图建立了该项目的图标专用库。这个还是蛮好用的。http://www.iconfont.cn(推荐)
它可以上传自己的图标,可以收藏,可以建立项目,添加项目小组成员。
它有三种使用方法:
1.unicode码
复制生成的代码:@font-face {font-family: 'iconfontyyy'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfontyyy') format('svg'); }
自定义样式class名:.iconfontyyy{ font-family:"iconfontyyy" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
页面结构:<i class="iconfontyyy">3</i>
2.font-class
编辑之后样式自动生成:例如http://at.alicdn.com/t/font_9cd26v04g9pgy14i.css 注意,每次更新图标的样式后路径都要重新替换一次,因为每次的修改生成的样式的名字都是不一样的
使用:a.复制并引入该css样式链接,b.页面结构:<i class="iconfontyyy icon-xxx"></i>, 加上该图标的class名
3.symbol(svg图,支持不同颜色,仅支持ie9+,渲染svg性能比png稍差)
编辑之后js自动生成:例如http://at.alicdn.com/t/font_1473319176_4914331.js注意,每次更新图标的后路径都要重新替换一次
使用:a.复制并引入该js链接
b.通用的css代码:例如.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
c.页面结构:<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
icon fonts的更多相关文章
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 响应式Web图形篇 —— icon fonts 的探析及应用
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- icon fonts generator & svg
icon fonts generator https://icomoon.io/app/#/select https://icomoon.io/ http://fontastic.me/ http:/ ...
- icon fonts入门
iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/ https://icomoon. ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- :after和:before中的content(放入icon)
作者:zccst 最近见到一种图标写在content里的用法,觉得很新奇.查了一下是webfont. 问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标 a#end_cc, a ...
- 带你优雅的使用 icon
前言 本篇文章其实陆陆续续写了快半年,主体部分写好了很久了,但由于种种原因一直没有发布.首先来说说写这篇文章的主要初衷是:在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的 ...
- CSS3与页面布局学习总结(五)——Web Font与Sprite
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- 20145205 实验一 Java开发环境的熟悉
实验内容 命令行下Java程序开发 IDEA下Java程序开发.调试 练习(通过命令行和Eclipse两种方式实现,在Eclipse下练习调试程序) 实现凯撒密码,并进行测试 实验要求 使用JDK编译 ...
- 四则运算之Right-BICEP测试
Right-结果是否正确? 正确 B-是否所有的边界条件都是正确的? Conformance(一致性):值是否和预期的一致 是一致的 Ordering(顺序性):值是否如应该的那样 是 是有序或者无 ...
- C %p
格式控制符“%p”中的p是pointer(指针)的缩写.指针的值是语言实现(编译程序)相关的,但几乎所有实现中,指针的值都是一个表示地址空间中某个存储器单元的整数.printf函数族中对于%p一般以十 ...
- spring mvc controller间跳转 重定向 传参 (转)
转自:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ 1. 需求背景 需求:spring MVC框架contr ...
- Mysql 数据库之修改标的结构
比如我们新建一user表 create table user( id int unsigned auto_increment primary key, name varchar(60) not nul ...
- Intellij IDEA如何使用Maven Tomcat Plugin运行web项目(转)
首先,Run --> Edit Configurations,这时候如下图: 然后点击左上角的加号,可以添加一个新的配置,如下图: 选择Maven,如下图: 下面填上自己的配置信息,点击appl ...
- (。・・)ノ~java常见错误
空指针错误 刚开始接触数组的时候,最容易出现的错误就是空指针错误.所谓空指针错误就是,一个引用指向了一个空的地址,而空的地址,没有地址,更没有数据,这时候用这引用去和别的数据对比,显然要出错.为了避免 ...
- JavaScript对象属性(二)
对象object 例子一: var car = { "wheels":4, "engines":1, "seats":5}; 例子二: v ...
- java中的访问修饰符
Java有四种访问权限,其中三种有访问权限修饰符,分别为private,public和protected,还有一种不带任何修饰符.其中package代表缺省的访问权限,具体到代码中就是不写任何修饰符的 ...
- WordPress基础:固定链接的设置
安装wordpressp后的工作之一最好修改固定链接,原因就是wp默认的/?p=123形式不利于搜索引擎优化而且也不美观. URL结构参数说明:%year%:日志发表的年份,如2009%monthnu ...