![fd16f11f419744e4a4cce7b36472f80c.png](https://i-blog.csdnimg.cn/blog_migrate/e479a5138c52df41fd9bb18c2d280189.jpeg)
选择图标
![bfcd5d88b351d53bfe13e07006c6c6a4.png](https://i-blog.csdnimg.cn/blog_migrate/f651b5b7299d5e35011cd6bed8db7857.jpeg)
下载代码
1.添加项目
![4603ad6909b4b3a41df09190ab61e6f4.png](https://i-blog.csdnimg.cn/blog_migrate/4e1cc4fb8fe6dfd11930cf94be269ff1.jpeg)
2.选择 Unicode
![f4e95f061cd8ae213895b8f0d887c7c1.png](https://i-blog.csdnimg.cn/blog_migrate/941246506ecd6505bc7ce63ea44045ef.jpeg)
3.下载代码
![6a9e6aa77053787ae6a2d16176a4a443.png](https://i-blog.csdnimg.cn/blog_migrate/bd3ac81bc86c84c868da3ef7e27075d8.jpeg)
4.解压文件
![166a7387d4981f3774a47b143fa58399.png](https://i-blog.csdnimg.cn/blog_migrate/3d5c5f46c7170d28920f0afe45afb04a.jpeg)
5.拷贝iconfont.css到小程序目录
注意:我这里用的是支付宝小程序做演示 所有吧css后缀改成了 acss 如果是微信小程序的话 改成对应的.wxss 就好了
![8834e1c1f5d8c3e2d5de7843d781ac5b.png](https://i-blog.csdnimg.cn/blog_migrate/62bd3b25eff9c350abbd7e785303996f.jpeg)
引用图标
可以单页面引用 也可以全局引用 如果是全局引用的话 则在app.acss/app.wxss中 引用即可 下面演示单页面引用方法
1.修改iconfont.css文件
打开刚才复制过来的css文件可以看到如下图所示 除了红框标识出来的base64 路径外 其他全部删掉
![6c0a4d39cd439ac5cd89bfd2a418e01d.png](https://i-blog.csdnimg.cn/blog_migrate/ad8c532f1b883eb0c76644fa79691c85.jpeg)
2.导入css
在页面对应的css 文件中 用 @import $PATH 引用图标
![b662ceda2facf71fbcdb641309e676f7.png](https://i-blog.csdnimg.cn/blog_migrate/854a4e69d04a9bc8bd577d5f562e646b.jpeg)
3.使用图标
![b42cc8f48b26e08a3a3eb0bae25f0b79.png](https://i-blog.csdnimg.cn/blog_migrate/c75eccd362000ccd7a3cb535165e17ef.jpeg)
4.效果展示
![cc0e16807ad5c9808da02912de3d9ef5.png](https://i-blog.csdnimg.cn/blog_migrate/6b1ac1c136b3e2386dbdd1cdafdd530c.jpeg)
大功告成
![f5c924f8b3a331f04eaf54aca3895e66.png](https://i-blog.csdnimg.cn/blog_migrate/12fe4b9ece991cdfc730e9d8b84b8252.jpeg)
5. 注意
引用彩色图标的话 图标本身颜色会丢失 默认变成字体颜色
如下 我的彩色巧克力变成了灰色狗粑粑
![91ce4ad1e89ac5651c3fbdfc98c6d720.png](https://i-blog.csdnimg.cn/blog_migrate/ad79b07f9bed25655fb4012458799d9d.jpeg)
![5fdf6af8c48874e0c43b2f973a3f9139.png](https://i-blog.csdnimg.cn/blog_migrate/2b56e02c3439e328aaa46c870e3fd24b.jpeg)
iconfont图标好像只支持单色(此点有待研究 有其他发现或异议的 请于下方评论)