uniapp引入自定义图标

目录

一、选择图标,加入购物车

二、下载到本地

三、导入项目

四、修改字体引用路径

五、开始使用


这里以扩展iconfont图标为例

官网:iconfont-阿里巴巴矢量图标库

一、选择图标,加入购物车

二、下载到本地

直接点击下载素材,网站就会自动将我们加入购物车的图标一起打包下载到本地

解压之后的文件夹

三、导入项目

将iconfont.css、iconfont.ttf导入到uniapp项目中,建议放到static目录下

笔者是在static目录下建了iconfont的文件夹,专门存放iconfont相关资源的

四、修改字体引用路径

修改iconfont.css中字体的引用位置,改为我们存放iconfont.ttf文件的位置

复制代码
src: url('/static/iconfont/iconfont.ttf') format('truetype');

五、开始使用

在App.vue中引入iconfont.css样式文件,注意要改为自己的存放路径

使用 custom-prefixtype 属性自定义图标

复制代码
<uni-icons custom-prefix="iconfont" type="icon-setting" size="30"></uni-icons>
相关推荐
CHB6 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode