前言

前段时间有使用图标的需求,在阿里图标库找到不少小图标，可是总不能一个一个全下载下来放到项目文件里吧，这样就太麻烦了，还占项目空间(小程序要求整个项目大小不能超过2M),怎么办呢？第一种办法是把图标啥的都放在服务器上，这得把图标下载下来，然后上传到自己的服务器，略显麻烦。还有一种方法就是直接在阿里图标库中生成css字体文件，然后在项目中引用即可，这种不用一个一个下载，只需添加一个css文件，所占空间也比把小图标放在项目里要小很多，话不多说，一起来看看怎么做吧。

选择图标，生成css代码

1. 图标库地址 :阿里图标库；

2. 登陆阿里图标库；

3. 搜索你想要的图标；

4. 点击添加入库；
   

5. 点击右上角购物车按钮，就会看见你添加的图标了；
   

6. 点击下方添加至项目，如果没有项目可以新建一个，新建完成后会自动跳转至你这个项目；
   
   

7. 在这里直接点击查看在线链接，然后点击"暂无代码，点此生成",等待代码生成后，复制代码（访问链接复制网页上的代码）。

在小程序中引用该图标

1.进入小程序开发者工具，在我们的项目文件夹中创建一个wxss文件，将你复制的代码粘贴进去并保存；

2.在你需要引入的页面wxss文件中导入图标样式，此处示例为index页面，即在index.wxss文件中写入@import ‘你当前图标样式文件的路径’，即可引入，如图：

3.要在页面中显示该图标，如图1，在代码中写一个icon标签(i标签也可以)，在class属性中首先写入iconfont，声明你使用的字体样式 然后写入阿里图标库中该图标的名称(如图2)，如果你嫌打开阿里图标库麻烦，可以直接打开icon.wxss,查看你的图标名称，不过这样不能直观的看到你的图标长什么样，如果图标很多的话，就比较麻烦，如图3

图1

图2

3.保存你的代码，你就可以看到你引入的图标显示出来啦，如果想要调整它的样式，可以直接按字体的样式来写，比如想改变它的颜色，直接就可以写color:‘你想要的颜色’，想改变大小，直接写font-size:'你想要的大小’即可。；

好了，今天的分享就到这了，觉得有用就点个赞哦！