在uni-app开发的小程序中引入阿里的多色图标

uniapp不支持阿里多色图标,需要使用工具iconfont-tools进行处理

1.首先 在阿里图标库将 需要的图标添加到项目中 并下载压缩包,取出iconfont.js文件

2.安装iconfont-tools,安装完成会显示出安装到了电脑的那个目录

3,进入目录就会看到下面的iconfont-tools编译器

4.双击打开,它会爆出在哪个目录缺少iconfont.js文件,然后把阿里图标解压出来的iconfont.js放进/Users/mac目录去

5,再次执行iconfont-tools,会展示执行成功

在mac目录下会生成iconfont-weapp目录,

把下面iconfont-weapp-icon.css文件拷贝到项目目录里

在main.js中引入

复制代码
import './static/iconcss/iconfont-weapp-icon.css'

在文件中使用

复制代码
<i class="t-icon t-icon-call"></i>
相关推荐
码间留白19 小时前
uni-app 鸿蒙离线打包:一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
恩创软件开发19 小时前
自助KTV系统管理员续单功能
经验分享·小程序
多客:duokelijie1 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白2 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
AI源码3 天前
在线考试小程序
小程序·notepad++
华玥作者3 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang3 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008893 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW4 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468594 天前
uniapp vue3 小程序开发注意事项
uni-app