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>
相关推荐
秃头披风侠_郑8 小时前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app
宠友信息9 小时前
消息撤回与已读状态如何在即时通讯源码中统一管理
java·spring boot·websocket·mysql·uni-app
帅帅的记忆1 天前
uniapp项目调用原生android studio的sdk文件(即aar文件)
android·uni-app·android studio
宠友信息1 天前
Spring Boot与Redis ZSet实现仿小红书源码双列瀑布流推荐
java·大数据·前端·spring boot·redis·mysql·uni-app
这是个栗子2 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
大白要努力!4 天前
uni-app 全面入门速查手册
前端·uni-app
李剑一4 天前
uni-app x 实现本地 JSON 文件的导入导出(APP端可用)
android·前端·uni-app
2501_915106324 天前
iOS 软件测试工具性能监控、日志分析 KeyMob、Instruments等
android·ios·小程序·https·uni-app·iphone·webview
PedroQue995 天前
uni-router v2.0.0:四大功能拆分为插件,按需加载
前端·uni-app
不法6 天前
uniapp map地图导航/地图路线
前端·vue.js·uni-app