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>
相关推荐
_处女座程序员的日常7 小时前
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
javascript·uni-app·vue
慢慢雨夜16 小时前
uniapp打包华为,提示请提供64位版本软件包后再提交审核
uni-app
秋雨凉人心16 小时前
uniapp 设置安全区域
前端·javascript·vue.js·uni-app
Little_Code16 小时前
uniapp 如何使用vuex store (亲测)
uni-app·vuex·store
咸虾米_17 小时前
uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用
网络·uni-app·unicloud
Jiaberrr20 小时前
uniapp中使用原生ajax上传文件并携带其他数据,实时展示上传进度
前端·javascript·vue.js·ajax·uni-app
上趣工作室1 天前
uniapp中使用全局样式文件引入的三种方式
开发语言·rust·uni-app
秋田君1 天前
uniapp路由与页面跳转详解:API调用与Navigator组件实战
uni-app
FIRE1 天前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
@Carey1 天前
uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程
uni-app