unicode引用

HTML 形式

1. 拷贝项目下面生成的font-face ,并引入
2. 定义使用iconfont的样式

3. 挑选相应图标并获取字体编码，应用于页面

   
   image.png

CSS 形式

大致的跟上面HTML引入方式类似，把  替换成 \e606，利用伪元素向页面添加图标。
这种方式如果要添加多个的话，直接在content里输入多个就行了，比如 \e700\e65a

image.png

font-class引用

1、拷贝项目下面生成的fontclass代码，引用的时候注意协议
2、 挑选相应图标并获取类名，应用于页面
至于类名，简单粗暴的方式就是 class = "iconfont XXX " ， XXX 是你要添加的图标的名字，名字就是下面红圈圈那里咯~

image.png

也可以查看 //at.alicdn.com/t/font_450823_qbr4dvg498z7iudi.css里的源代码内容，然后根据需要添加类名。

image.png

symbol引用

1. 拷贝项目下面生成的symbol代码
2. 加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3. 挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

这种用法其实是做了一个svg的集合，支持多色图标，可以通过font-size,color来调整样式，SVG 不会有锯齿，默认居中。

参考：
iconfont 官方使用帮助