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>

启动项目,效果如下

相关推荐
脾气有点小暴7 分钟前
Uni-app App 端自定义导航栏完整实现指南
uni-app
CDwenhuohuo5 小时前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
行走的陀螺仪9 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5
Hzsilvana9 小时前
踩坑日记:Uniapp项目定位偏差与依赖更新的真相
uni-app
丸子哥哥12 小时前
vue + uni-app:利用原生uni.chooseImage封装拍照功能的组件
微信小程序·uni-app·vue
雪芽蓝域zzs13 小时前
uniapp 判断运行设备类型(安卓、苹果、鸿蒙、微信小程序、H5)
android·uni-app·harmonyos
梦65013 小时前
UniApp 全面介绍与快速上手
uni-app
壹号机长13 小时前
uniapp+vue3 接入deepseek Ai
ai·小程序·uni-app
2501_9151063213 小时前
iOS开发中CPU功耗监控的实现与工具使用
android·macos·ios·小程序·uni-app·cocoa·iphone
绿鸳14 小时前
uniapp安装uview-plus
uni-app