阿里iconfont字体图标的使用

iconfont 为大家提供了很多开箱即用的图标库，同时也提供了灵活的集成办法。

在一个项目中嵌入你想要iconfont字体图标，跟着下面的步骤一步步来实践一下：

创建项目

在 iconfont 的【资源管理 => 我的项目】中创建一个项目，取个名字，字体格式根据需求选择，一般就默认加上一个Base64。

将图标添加到项目

方法就是在素材库中搜索想要的图标，然后点图标上的购物车图标（添加入库），然后在右上角的购物车中添加到你刚新建的项目中。

获取代码

在项目页面下载代码到本地：

嵌入项目

下载解压后的目录包含：

其中demo_index.html是告诉你怎么用的，根据自己需要选择引用方式，我这边使用Font class的方式，将下载到的代码中需要的文件放到项目资源目录下，然后在页面中引入iconfront.css即可，说明：

在使用时，比如我这次选了几个图标中，有微信图标他的class类是icon-wechat，那我在页面上只需要使用：

<span class="iconfont icon-wechat"></span>

就可以正常显示微信图标了。

后期如果有更多图标加入，只需要将图标加入到项目，然后重新下载代码然后覆盖那些需要的文件可以了。

线上模式嵌入

iconfont 还提供了线上模式集成只需要在项目界面生成一下代码，然后将生成的css地址嵌入即可，也可以尝试一下。