uni-app使用阿里iconfont多色图标

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

先吐槽一下，好像uniapp不支持symbol,多色图标😂

进入正题，第一步下载到本地

• 进入iconfont中的我的项目中,先下载到本地

• 然后解压。
  

第二步下载一个处理iconfont的命令

• 全局下载iconfont-tools，下载一次就行
  npm install -g iconfont-tools
• 下载完成后，在刚刚解压后的文件目录中，进入命令行
  执行 iconfont-tools
• 如果不需要修改文件夹名、css文件名、统一类名 、字体大小的话，一路回车就行,如果修改的话就直接修改
  
• 最后会生成小程序组件（文件夹）、css文件(uniapp只用这一个)、wxss文件

最后只需要把文件放到项目中

• uniapp项目只需要把那个css文件放到项目中,看下图
  
• 然后把这个文件引入到App.vue中

@import url("./style/iconfont_css.css");

• 看看文件中
  
• 最后在页面中这样用,iconfont类名是必须的

<view class="iconfont iconfont-jixiao"></view>

最后到这就结束了，学到了就一键三连，谢谢啦~

更多推荐：wantLG的《普歌-码上鸿鹄团队:微信小程序使用阿里巴巴iconfont矢量多色图标》

---

• 作者：wantLG
• 本文源自：wantLG的《uni-app使用阿里iconfont多色图标》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。