在下一篇文章中，我们已经成功添加了tabBar，所以本文将讲解参考icon图标。 小程序有自己的图标供你使用，而且图标有限，很多都不能满足我们的需求。 这次给大家介绍的是阿里图标，有海量的图标供大家选择，
点击进入阿里图标库
下面我给大家介绍两种引用图标的方式，引用小程序自带的图标和引用阿里图标
1.引用小程序自带的图标
1.打开了解小程序图标；
下面我给大家写一个最简单的图标参考例子：代码如下：
结果如下：
全部实现如下：
小程序图标的属性如右图所示：
它只是实现了参考小程序附带的图标
2.引用阿里图标
① 首先创建一个空目录，随便命名，读取即可，主要用来放iconfont.wxss，如右图：
②打开
尚未登录的朋友，请登录阿里图标
第一步：选择您需要的图标，如右图：
第 2 步：添加到购物车
如果您想选择该图标，请将其添加到购物车小程序引入css，如右图所示
您可以选择任意数量小程序引入css，选择完毕后，点击右图的购物车
第三步：添加到项目
点击后，如右图所示：
添加项目。 如果没有项目，则创建一个新项目。 添加后如右图所示：
第四步：下载
点击退出
按下按钮，下载后打开如右图：
步骤5：下载上面的iconfont.css，并将其放置到新创建的空目录中，如右图：
步骤6：将iconfont.css重命名为iconfont.wxss，如右图所示：
并在app.wxss中引入iconfont.wxss如右图：
注：如果不加引号，则不会显示最后一个阿里图标
第七步：打开阿里图标，点击
然后如右图所示：
复制内容后
步骤8：打开iconfont.wxss并更改@font-face中的内容
复制上图中你复制的内容后，替换iconfont.wxss中@font-face中的内容，代码如下：
第九步：简单引用页面，代码如下；
代码解释如下：
步骤10：疗效如下：
讲到这里就结束了，希望大家能够在项目中灵活运用~~，也希望大家多多反馈，我写的比较详细了，希望大家不要觉得太长- 气喘吁吁~
