在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>
相关推荐
初尘屿风35 分钟前
基于微信小程序的电影院订票选座系统的设计与实现,SSM+Vue+毕业论文+开题报告+任务书+指导搭建视频
vue.js·微信小程序·小程序
貂蝉空大1 小时前
uni-app开发app时 使用uni.chooseLocation遇到的问题
uni-app
林同学++1 小时前
uniapp多端适配
uni-app
kidding7231 小时前
uniapp引入uview组件库(可以引用多个组件)
前端·前端框架·uni-app·uview
qq_316837751 小时前
uniapp 安卓10+ 选择并上传文件
uni-app
合法的咸鱼1 小时前
uniapp 使用unplugin-auto-import 后, vue文件报红问题
前端·vue.js·uni-app
paterWang2 小时前
基于SpringBoot的驾校报名小程序系统设计与实现(源码+文档)
spring boot·后端·小程序
EasyNVR3 小时前
EasyRTC:全平台支持与自研算法驱动的智能音视频通讯解决方案
运维·服务器·小程序·音视频·webrtc·p2p·智能硬件
阳%5 小时前
uni-app小程序开发 基础知识2
前端·uni-app
韩召华9 小时前
微信小程序(uni)+蓝牙连接+Xprint打印机实现打印功能
微信小程序·小程序·notepad++