阿里巴巴矢量图标库在uni-app中的使用方法

开发工具为:HBuilderX

步骤1:

先将喜欢的字体图标加入购物车中

点击购物车然后点击添加至项目

有就选择没有就新建

步骤2:

1.将项目文件下载至本地

2.打开下载到本地的项目文件,将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入,方便管理)

3.打开iconfont.css文件,然后将顶部 @font-face{}

替换为你的项目中Unicode下的 @font-face{}

4.然后在App.vue中声明

步骤3:

在页面中使用<text></text>

两种方式:

第一种 Unicode中在图标上点复制代码 &#xe61a;

第二种 Symbol中在图标上点复制代码 icon-icon-03_ji

(因为是字体图标所以它并不能显示颜色,如果需要显示颜色需要下载另外的插件)

打开命令提示符执行该命令

npm install -g iconfont-tools

切换到刚才下载到本地的项目文件目录下执行该命令

iconfont-tools (一直回车就行)

执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复步骤2中的2和4(只要该文件夹中的 .css文件)

相关推荐
HebyH_4 分钟前
uniapp如何封装uni.request 全局使用
uni-app
随笔记17 小时前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的17 小时前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
随笔记17 小时前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨18 小时前
uniapp上传文件
前端·uni-app
猫头_20 小时前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
iOS阿玮1 天前
凭一己之力干穿一个品牌,互联网+时代口碑比以前更重要了!
uni-app·app·apple
前端amanda1 天前
uniapp中uview组件中u-input格式化后赋值踩坑
前端·javascript·uni-app
shadouqi2 天前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
草字2 天前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app