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

相关推荐
游戏开发爱好者89 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063211 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063211 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息12 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”13 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
局外人LZ1 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
前端呆头鹅1 天前
Websocket使用方案详解(uniapp版)
websocket·网络协议·uni-app
浮桥2 天前
uniapp+h5 公众号实现分享海报绘制
uni-app·notepad++
2501_916007472 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview