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>

启动项目,效果如下

相关推荐
xw52 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !2 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
iOS阿玮9 小时前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple
xiaohe060113 小时前
🪀 Uni ECharts:也许是 uni-app 中使用 ECharts 最优雅的解决方案
uni-app
陈不知代码1 天前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮1 天前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘1 天前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero2 天前
UniappDay03
vue.js·微信小程序·uni-app