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

相关推荐
木子啊5 小时前
ProCamera 智能水印相机解决方案 (UniApp)
数码相机·uni-app·水印相机·小程序水印
木子啊5 小时前
Uni-app跨页面通信三剑客
前端·uni-app·传参
Rysxt_1 天前
UniApp五大UI框架与uni-ui核心区别对比
uni-app·uni-ui
2501_915918411 天前
HTTPS 代理失效,启用双向认证(mTLS)的 iOS 应用网络怎么抓包调试
android·网络·ios·小程序·https·uni-app·iphone
2501_915106321 天前
混合应用(Hybrid)安全加固,不依赖源码对成品 IPA 混淆
android·安全·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
无需越狱,来对 iOS 设备进行调试、管理与分析
android·ios·小程序·https·uni-app·iphone·webview
芒果大胖砸1 天前
uniapp当中如何实现长按复制功能并且能够自由选择内容
开发语言·javascript·uni-app
00后程序员张1 天前
在 iOS 上架中如何批量方便快捷管理 Bundle ID
android·ios·小程序·https·uni-app·iphone·webview
换日线°1 天前
uni-app对接腾讯即时通讯 IM
前端·uni-app
咚咚?1 天前
uniapp [JS Framework] 当前运行的基座不包含原生插件[xxxx],请在manifest中配置该插件,重新制作包括该原生插件的自定义运行基座
开发语言·javascript·uni-app