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>

启动项目,效果如下

相关推荐
嘿siri1 小时前
uniapp enter回车键不触发消息发送,已解决
前端·前端框架·uni-app·vue
00后程序员张2 小时前
fastlane 结合 appuploader 命令行实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 小时前
iOS 性能优化这件事,结合多工具分析运行期性能问题
android·ios·性能优化·小程序·uni-app·cocoa·iphone
嘿siri2 小时前
自定义app端、小程序端和H5等多端自定义键盘输入框,跟随系统键盘弹出和隐藏
javascript·小程序·uni-app·uniapp
游戏开发爱好者82 小时前
App Store 上架流程,结合多工具协作
android·ios·小程序·https·uni-app·iphone·webview
cesske2 小时前
如何在yii2的uniapp项目中处理提交重复问题?
uni-app·状态模式
茶憶4 小时前
UniApp 安卓端实现文件的生成,写入,获取文件大小以及压缩功能
android·javascript·vue.js·uni-app
2501_915921434 小时前
uni-app 的 iOS 打包与上架流程,多工具协作
android·ios·小程序·uni-app·cocoa·iphone·webview
iOS阿玮14 小时前
1V1 社交精准收割 3.6 亿!40 款马甲包 + 国内社交难度堪比史诗级!
uni-app·app·apple
脾气有点小暴18 小时前
uniapp开发APP 内嵌外部 HTTPS 链接的实现方案
vue.js·uni-app