uniapp引入自定义图标

菜牙买菜2024-07-26 16:56

这里以扩展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-prefix 和 type 属性自定义图标

复制代码

<uni-icons custom-prefix="iconfont" type="icon-setting" size="30"></uni-icons>