阿里团队是让人非常佩服的团队，不仅仅是技术，更是理念。

　　字体图标是开发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个图标的类。

　　运行效果如下

　　 搞定！