如何使用阿里云字体图标教程

为什么要使用？

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont)。

字体图标使用流程

阿里图标官方地址：http://iconfont.cn/
打开地址后注册登录。就不多说。
然后点击图标库找自己想要的图标，或者搜索自己想要的图标。

然后鼠标放到自己喜欢的图标上，点击购物车，添加到购物车。

点击添加到项目，确定


进去后有个点击生成代码，随后就是上图那样式，

总共有三种添加方式，只不过引入的方式不同，每种方式下都会有相应的代码生成，第一种直接在css里引入，其他两种直接的页面里引入，引入进去之后就是写入各个图标对应的代码。

把上图的代码直接放进代码就行，例如：

<span class="time"><i class="iconfont icon-mulutubiao">&#xe60e;</i>
  <stl:a href="" style="color: #bbb;">{Channel.Title}</stl:a>
</span>

然后就出来啦!