阿里巴巴矢量图标库在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文件)

相关推荐
web1508509664115 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined2 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie2 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端2 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用3 天前
uniApp上传文件踩坑日记
uni-app