UniApp怎么使用IconFont?从下载字体到项目集成全攻略

还在为到处找图标发愁吗？很多小公司是没有ui的，但是又想要界面好看，那怎么办呢？好在阿里开源了IconFont。

1. 访问网站，搜索图标

https://www.iconfont.cn/，输入你要搜索的图标名称，比如星星。

2. 把图标加入购物车

4. 添加到项目

5. 选择项目，点击确定（如果没有项目就新建一个）

6. 自动跳转到我的项目，点击下载到本地或者使用在线链接

7.新建一个uniapp项目

8、将下载的压缩包解压，丢到static目录下（里面是一些样式和字体文件）

9、打开iconfont.css，修改样式路径

10、打开App.vue，引入css文件

11、使用图标，class样式如下，iconfont是必须的，后面那个就是iconfont.css文件的.icon-xingxing1:before {content: “\e75b”;}。style里面可以自定义图标大小和颜色。

12、验证效果，成功了

UniApp 集成 Iconfont 的核心步骤已全部解锁。如果还有疑问，或者有更好的方案，评论区等你！

往/期/回/顾

告别混乱！若依微服务新增子模块的标准化实践

保姆级教程：手把手教你在本地部署若依微服务版

告别尴尬演示！3分钟一键替换若依框架ruoyi路径，定制专属项目标识