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>
相关推荐
遗憾随她而去.3 小时前
uniapp App平台 真机运行
uni-app
愚者Pro5 小时前
Flutter Widget组件学习(专为 Uniapp 转 Flutter 定制)
vue.js·学习·flutter·uni-app
粉末的沉淀1 天前
uniapp:带参数回到上一页
uni-app
华玥作者2 天前
从“碎片化”到“资产化”:Vue3 + UniApp 组件库的进化论
ui·uni-app·vue·组件库
Crystal3282 天前
App wgt 热更新 — 开发笔记(uniapp)
前端·uni-app·app
大阳光男孩2 天前
【UniApp小程序开发】解决无法使用Vue自定义指令的完美替代方案:权限组件封装
前端·vue.js·uni-app
2501_915918412 天前
Linux 上生成 AppStoreInfo.plist,App Store 上架 iOS
android·ios·小程序·https·uni-app·iphone·webview
只要微微辣2 天前
Uniapp 微信小程序 Canvas画框标注:拖拽缩放全攻略
前端·微信小程序·uni-app·canvas·canva可画
我命由我123452 天前
Dart - 数字类型、布尔类型、列表类型
android·开发语言·flutter·ios·uni-app·android jetpack·移动端
一朵盆栽2 天前
uni-app用Windows系统开发iOS端
ios·uni-app·cocoa