前端——i标签制做矢量图

 

 

使用icon font来生成图标相对于基于图片的图标来讲，有以下的好处：1.自由的变化大小2.自由的修改颜色3.添加阴影效果4.IE6也能够支持5.支持图片图标的其它属性，例如，透明度和旋转等等6.能够添加text-stroke和background-clip:text等属性，只要浏览器支持

那么如何使用iconfont呢？能够有以下几种方式：

1.使用现有的开源iconfont矢量图标字体库。如

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。

fontello

http://fontello.com/

在线定制你本身的icon font字体图标字库，也能够直接从GitHub下载整个图标集，该项目也是开源的。

icomoon

http://icomoon.io/app/#/select

能够在线导入的SVG格式字体，并进行编辑，而后下载来使用。很酷吧！

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标能够在Bootstrap下无偿使用。自带了200多个图标。

2.建立本身的iconfont字体库，能够使用以上各平台的在线生成工具，也能够推荐使用一些生成iconfont的工具，如iconmoon。

3.那么具体该如何使用这种字体图标呢？其实很简单，以PC端的应用为例，只须要分三步便可完成：

 

 

以上demo使用方法详情请参考：http://www.iconfont.cn/help/iconuse.html

参考文献：

http://www.iconfont.cn/

http://www.chinaz.com/design/2012/0904/272556.shtml

http://www.weste.net/2013/12-13/94697.html

作的比较成熟的这个 矢量图字体图标插件  http://fontawesome.io/examples/