在网站中经常会用到很多图标，例如下面的导航功能：
图标
传统的做法，可能是做成很多个gif/jpg的小图片，或者是做成一张大的图片，再使用CSS Sprite来进行控制。
现在有一个更常用的做法，是做成一个iconfont，把矢量图标打包在一个字体文件中，再通过css的控制来进行使用。那么使用iconfont有什么优势呢？
大概归纳了一下：
- 图标是矢量图形，可以随意缩放不会变形，特别适用于自适应的页面；
- 一次性加载，不是多次请求小文件，适用于性能要求高的场合；
- 在浏览器中渲染性能好；
- 代码和样式分离，HTML代码里面不需要出现IMG标签，只需要CSS就可以了！
具体实现
下面就以AUI为例，看看iconfont的具体实现。
首先实现iconfont一般需要两个文件，一个字体文件，例如aui_iconfont.ttf，另外一个就是css文件，例如aui-iconfont.css。
重点在aui-iconfont.css的内容：
@font-face {
font-family: "auiicon";
src: url('aui_iconfont.ttf') format('truetype');
}
.aui-iconfont {
position: relative;
font-family:"auiicon" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.aui-icon-appreciate:before { content: "\e644"; }
.aui-icon-check:before { content: "\e645"; }
.aui-icon-close:before { content: "\e646"; }
.aui-icon-edit:before { content: "\e649"; }
.aui-icon-emoji:before { content: "\e64a"; }
.aui-icon-favorfill:before { content: "\e64b"; }
@font-face表示在网页中引用一个字体文件，而.aui-iconfont 这个样式作为基础类型，定义了元素的字体使用我们的iconfont，后面的.aui-icon-appreciate、.aui-icon-check之类分别通过改变元素中的内容引用不同的图标。
比如在页面里面引用：
<i class="aui-iconfont aui-icon-edit"></i>
页面中出现的就是这样的小图标：
aui-icon-edit
然后你还可以像使用字体一样的使用这个图标，你可以设置font-size, color来改变图标的大小、颜色甚至是阴影！
<i class="aui-iconfont aui-icon-edit" style="font-size:50px; color: red;"></i>
Paste_Image.png
是不是还挺好用的？
如何制作我需要的图标字体文件？
如果你使用过bootstrap就会觉得iconfont是那么似曾相识了，不过重点在这个部分了，别人的字体文件中的图标都不是我们需要的图标，换句话说如何制作我们需要的图标字体文件呢？
如果放在若干年前，图标字体的制作决定是个体力活，矢量的图标需要专业的UI来制作，而现在聪明的码农们早就发明了很多实用的工具方便大家的使用。比如阿里妈妈提供的http://www.iconfont.cn/。
iconfont.cn
有了这个网站，一切变得很简单，里面汇总了几十万个常用的矢量图标，你可以随意挑选，然后打包，导出生成字体文件和css，即选即用。
随便搜一个key，出来300多个结果！
众多结果
详细的使用说明参见这个页面了：
http://www.iconfont.cn/help/platform.html
好了，我的APP需要用到的图标都有着落了！
网友评论