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>

启动项目,效果如下

相关推荐
anyup10 小时前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
阿斌_bingyu70914 小时前
uniapp实现android/IOS消息推送
android·ios·uni-app
茶憶18 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
2501_915918411 天前
移动端 HTTPS 抓包实战,多工具组合分析与高效排查指南
数据库·网络协议·ios·小程序·https·uni-app·iphone
雪芽蓝域zzs1 天前
uni-app 将 base64 图片编码转为 Blob 本地文件路径
网络协议·udp·uni-app
星光一影2 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码
mysql·小程序·uni-app·php
Qlittleboy2 天前
uniapp里 rich-text 里的img图片如何控制最大宽度
uni-app
阿奇__2 天前
uniapp h5 app 小程序获取当前定位
小程序·uni-app
*小雪2 天前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
一只程序熊2 天前
uniapp uniim ios配置消息推送
uni-app