如何使用IconFont？——矢量图标

1.背景介绍

网上的一些小图标除了可以使用css精灵图制作外，还可以使用现在比较热门的iconfont去制作。那么首先搞清楚一个问题，什么是iconfont？icon font顾名思义，可以理解成icon + font即 图标字体。图标字体，可以理解为是一种特殊的字体，网页中的一些小图标和特殊字符可以通过这种方法实现。简单来说就是把图片当成文字来使用。

2.知识剖析

2.1什么是iconfont？

iconfont，字体图标。通过使用字体格式的矢量图标来代替以往的图片格式的小图标。字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率下面，都可以做到完美缩放和扩大，不会像传统图片一样，增大到一定程度就会出现明显的锯齿或者变得模糊，影响展示效果。

2.2 如何使用icon font？

提供icon font的网站有很多，例如阿里巴巴矢量图标库、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons8、

我们今天主要就国内使用最多的阿里巴巴矢量图标库进行介绍。

在阿里巴巴矢量图标库中，在web端有四种主要的引用方式，分别是icon单个使用、unicode引用、font-class引用、symbol引用。

icon单个使用，单个图标用户可以自行选择下载不同的格式使用，包括png,ai,svg。此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。

比