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>
相关推荐
游戏开发爱好者844 分钟前
在 Windows、Linux 与 CI 环境下命令行上传 IPA 到 App Store
linux·windows·ios·ci/cd·小程序·uni-app·iphone
码农客栈2 小时前
小程序学习(十三)之请求和上传文件拦截器
小程序·uni-app
龙井>_<3 小时前
uniapp“手搓”一个年月选择器模态框(兼容多端)
uni-app
web_Hsir3 小时前
uniapp + vue2 + pfdjs + web-view 实现安卓、iOS App PDF预览
android·前端·uni-app
peachSoda73 小时前
uniapp app使用命令行HBuilderX cli快捷打包iOS和Android
uni-app
2501_916007471 天前
跨平台 App 安全,Flutter、RN、Unity、H5 混合应用加固
android·ios·小程序·https·uni-app·iphone·webview
咕咕咕_biubiubiu1 天前
uniapp插件——原生插件开发和使用
uni-app
芋头莎莎1 天前
UNIAPP连接MQTT记录要点
uni-app
新 一.1 天前
uniapp在ios上真机测试运行
ios·uni-app
2501_916007471 天前
不越狱如何查看iOS 应用的详细信息及其文件目录结构
android·macos·ios·小程序·uni-app·cocoa·iphone