uniapp 添加自定义图标

1. 下载自定义图标

在阿里图标库,选择喜欢的图标库
https://www.iconfont.cn/collections/index

建议按收藏数排序进行,能更快找到合适的图标

点开喜欢的图标库(如 Ant Design 官方图标库),将喜欢的图标添加到图标收集车(鼠标移动到喜欢的图标上时,会出现)

打开图标收集车

将图标添加到项目

将图标下载到本地

2. 将图标拷贝进项目

将下载的图标文件,拷贝到项目中的 static/font-icons 文件夹(若无则新建)

修改 static/font-icons/iconfont.css 中的路径

添加上图红色框的路径代码,以便项目能找到相关的图标文件

3. 将图标导入项目

在 App.vue 的 style 标签中导入

cpp 复制代码
@import "@/static/font-icons/iconfont.css";

4. 在页面中使用自定义图标

pages/index/index.vue

html 复制代码
<text class="iconfont icon-sync"></text>

启动项目,效果如下

相关推荐
bug总结15 小时前
uniapp的easycom自动组件注册机制
uni-app
HF_code16 小时前
uniapp-history路由深度指南
uni-app
suliqiang18 小时前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
梦曦i2 天前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app
EatFan2 天前
【实战经验】uni-app使用 SSE 踩坑,EventSource不支持怎么办?
android·后端·ios·uni-app
凡泰AI2 天前
如何为政务 APP 搭建开放平台,实现多部门、第三方供应商标准化入驻与统一管理
android·大数据·小程序·uni-app·app·政务
梦曦i2 天前
@meng-xi/uni-router 未来展望:夯实基础、深化体验、探索前沿
前端·uni-app
2501_916007473 天前
使用Apple Dashboards显示和自定iOS应用性能指标与数据可视化指南
android·ios·小程序·https·uni-app·iphone·webview
爱折腾的编程老炮3 天前
潮玩小程序订单模型-一张表装下所有玩法
spring boot·小程序·uni-app
两个人的幸福online3 天前
UniApp 对接 IM 即时通讯全攻略(下篇)
uni-app