本文介绍在uniapp项目中如何正确使用阿里云iconfont的彩色图标。通过搜索图标、下载到本地、解压并执行命令、复制CSS文件、引入CSS文件以及在代码中使用class名，实现彩色图标在项目中的显示。遵循步骤，可以在uniapp页面上看到预期的彩色icon效果。
文章目录
uniapp项目使用iconfont彩色图标
在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。
搜索图标
打开icongont官网搜索自己想要的图标，以微信图标为例。
点击自己想要的彩色图标加入到购物车，再点击添加至项目
根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹
下载到本地
这个地方选择Font class，然后点击下载至本地
解压压缩包并执行命令
下载iconfont-tools
解压下载的压缩包，下载iconfont-tools
npm install -g iconfont-tools
进入到文件夹里面用cmd执行下列命令
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
