在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>
相关推荐
阿俊-全栈开发5 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
shmily ....8 小时前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术10 小时前
uniapp制作一个个人页面
uni-app
小阿技术10 小时前
uniapp制作一个视频播放页面
uni-app
小周同学:15 小时前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
難釋懷17 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c17 小时前
微信小程序核心知识点速览
微信小程序·小程序
书山有路勤为径~18 小时前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_424409191 天前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview