ICON FONT 图标字体

在网站中经常会用到很多图标，例如下面的导航功能：

图标

传统的做法，可能是做成很多个gif/jpg的小图片，或者是做成一张大的图片，再使用CSS Sprite来进行控制。

现在有一个更常用的做法，是做成一个iconfont，把矢量图标打包在一个字体文件中，再通过css的控制来进行使用。那么使用iconfont有什么优势呢？

大概归纳了一下：

1. 图标是矢量图形，可以随意缩放不会变形，特别适用于自适应的页面；
2. 一次性加载，不是多次请求小文件，适用于性能要求高的场合；
3. 在浏览器中渲染性能好；
4. 代码和样式分离，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需要用到的图标都有着落了！