阿里团队是让人非常佩服的团队，不仅仅是技术，更是理念。
字体图标是开发web常用的元素，阿里为前端开发人员准备了大量的，而且免费的字体图标库。现在就记录下如何使用阿里字体图标库的详细步骤。
1.打开阿里字体图标官方网页
2.在首页的搜索框中输入你想找的字体图标的关键字
注意：阿里的搜索框既支持 输入汉字作为关键字，也支持输入汉语拼音，还支持输入英文单词检索。如下图所示，我想找主页的字体图标，既可以输入“主页”来搜索，也可以输入“home” 
搜索结果如下图：
3.选择你所需要的字体图标
当你找到自己所需要的字体图标时，你只需要把鼠标光标放在该图标的选项上，此时会出现一个遮盖层，其中有3个选项，点击第一个显示购物车外观的选项。如下图所示：
此时，你讲在页面的右上角“购物车”图标中，看到已经存入1个货物。如下图所示：
4.添加到项目
首先说明一点，这里的项目不是指你当前开发的web项目，而是阿里把没一次你要打包使用字体图标的请求，当做一个项目来处理。做这一步的目的是为了接下来在你自己的web项目中，使用你选中的这些字体图标。具体操作如下图：
先用鼠标点击页面右上角的购物车图标，如图：
然后你将看到从页面右侧弹出一个侧边框，里边展示出你所选中的3个字体图标，下面还有3个按钮选项。如下图所示
点击“添加至项目”按钮。此时如果没有登录，系统会提示你登录，如下图所示，有3种登录可用。
我使用的github账号登录。
登录成功后，在此点击页面右上角“购物车”，你将看到如下图所示的界面，让我们选择一个已有的项目，或者新建一个项目，来保存此次选中的字体图标。
我们点击右边的“+”号按钮，新建1个项目，来保存这几个字体图标。我们新建一个test1的项目，点击确定，来保存之。如下图所示，
5.生成字体图标的css样式文件
第4步操作完成后，你将看到如下的界面
如图所示，你需要先选中“Font class”选项，因为我们要通过页面标签的class属性，来使用字体图标。
然后用鼠标点击下面红色的超链接“暂无代码，点此生成”。这样就会给我们生成这几个字体图标的css样式文件的下载链接地址。如图所示：
如图所示，点击复制此代码，把地址在浏览器中打开，就能看到生成的代码了。如下图所示：
6.在自己的web项目中使用字体图标
首先，你需要把第5步最后页面里展示的css代码全选，然后ctrl + c复制出来。
然后在你自己的项目中创建一个.css文件。比如我这里创建了一个iconfont.css文件，然后把这些代码粘贴进去，并保存。如图： 
当然，如果你的是微信小程序项目，你就创建一个.wxss文件保存之。
大功告成，你可以在项目里使用了。比如：
我要在页面上显示“首页”的字体图标，代码如下：
<span class="iconfont icon-fenxiang">联系我们</span>
其中，iconfont类是基础类，使用任何图标都需要导入此类，icon-fenxiang类是具体到某1个图标的类。
运行效果如下
搞定！