uniapp小程序使用iconfont彩色图标

最新推荐文章于 2025-08-11 09:36:55 发布
原创 最新推荐文章于 2025-08-11 09:36:55 发布 · 3.8k 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何从阿里巴巴矢量图标库中选择图标并整合到项目中，包括下载图标、使用iconfont-tools工具、配置文件路径及在App.vue中引入图标文件的过程。

1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地

解压后的本地文件如下

2、下载iconfont-tools

npm install -g iconfont-tools

进入解压后的文件夹，如上图所示目录，命令行运行

iconfont-tools

然后一直enter,然后就会多出来一个iconfont-weapp的文件夹

进入文件夹,将其中的iconfont-weapp-icon.css放入static目录下，然后在App.vue引入该文件

@import './static/iconfont-weapp-icon.css';

使用：其中t-icon是必须的

<view class="t-icon icon-dianhua"></view>

 

使用iconfont彩色图标
aoban0653的博客
03-12 1378
概述：采用下载至本地导入，然后在前端代码里引用这个js。 步骤： 1、找到需要的图片，点击“添加入库” 2、可以添加到项目 3、选择Symbol，下载到本地 4.在本地下载路径中解压，将iconfont.js复制到项目src/assets路径下 ------> 5.在<style>加入通用css代码（引入一次...
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 507
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2485
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
在uni-app中使用彩色的iconfont
m0_43413873的博客
12-29 729
在uni-app中使用彩色的iconfont 一、在阿里巴巴矢量图标库下载iconfont 二、shift+右键打开powerShell 或者 直接在地址栏输入 cmd 三、 执行一下代码 npm install -g iconfont-tools 四、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 五、目录会多了个icon文件夹 六、 进入icon 文件夹 ctrl+a 全选 复制到 static 文件中 七、粘
【uni-app】使用iconfont字体
Erin_jwx的博客
08-11 332
第一步 搜索需要的图标，选择图标添加入库 第二步 网页导航栏的右上角点开购物车，查看已入库图标 第三步 新建项目，尽量把同一个项目中用到的图标放在一起 第四步 将图标下载至本地，解压 第五步 将以下两个文件导入到项目的static下 第六步 修改iconfont.css文件 代码如下 @font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf'); } 第七步 在App.vue中引
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8541
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp 使用 iconfont 彩色图标
m0_71513265的博客
07-02 1065
uniapp，使用 iconfont 图标，黑白、彩色显示
uni-app中使用iconfont彩色图标
java小白
08-29 2049
大家好，今天我们来学习一下uni-app中使用iconfont彩色图标，好好看，好好学，超详细的。
如何UNI-APP中使用iconfont彩色图标
weixin_45319327的博客
07-28 3342
uni-app使用彩色iconfont图标
uniapp引入彩色的字体图标的教程
Lulu_yo的博客
12-26 1003
1、阿里巴巴矢量图标官网，将自己喜欢的图标加入购物车，然后下载图标到本地2、在uniapp下的static，新建一个iconfont文件夹，将下载的压缩包解压图标到static的iconfont下面。3.进入文件夹下，按照以下步骤：4.命令窗口输入如图内容5、之后会发现多了这个文件6、然后就可以使用它了，一定要按照标横线这样的格式去使用：注意：1、一定要按照它的样式： t-icon t-icon-XXXXX2、通过height 和 width 改变它的图标大小3、需要加。
让uniapp小程序支持多色图标icon：iconfont-tools-cli
meteorites的博客
01-20 3309
让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理
iconfont彩色
02-07
#### 微信小程序中使用 Iconfont 彩色图标 针对微信小程序开发者而言，官方提供了更简便的方式通过命令行工具初始化配置文件以便更好地集成 Iconfont 资源库。执行如下指令可完成环境搭建工作，并自动生成必要的...
uni-app实现自定义导航栏并使用阿里小图标
weixin_42738839的博客
06-08 1216
首先下载阿里小图标，将选好的小图标添加入库，选择下载代码 将下载好的代码解压， 将iconfont.ttf文件拷到static文件夹下，打开iconfont.json找到对应的unicode 在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“\ue503”,fontSrc为iconfont.ttf的路径，fontSize为图标大小，color为图标颜色 { "pages": [ //pages数组中第一项表.
uniapp怎么调用阿里云iconfont
06-20
如果需要使用彩色图标，可以参考相关方法，在UniApp项目中引入带有彩色配置的CSS文件。例如，在`App.vue`中添加如下代码[^2]： ```css @import './static/fonts/iconfont-weapp-icon.css'; ``` 然后按照相同的类名...
uniApp中使用iconfont彩色icon
Benz_s600的博客
08-11 711
uniApp中使用彩色icon
icon-font引入彩色字体图标（Symbol方式），小程序、app、h5全端通用
display_flex_的博客
11-05 640
字体图标并没有任何问题，但是打包成app安装到在手机上出现了白屏的情况，排查后发现是字体图表的问题，在这里将处理方式进行记录。几年前用uniapp写App引用的时候出现的问题，由于开发时是在浏览器进行调试的，按照常规方式引入。6. 修改图标的大小（通过设置元素的width和height来实现,必须宽高相等，否则会显示异常）在iconFont上面找好图表以后下载压缩包。
uniapp开发多端项目，使用iconfont图标库时兼容微信小程序
最新发布
waviness的博客
08-11 268
3、将下载的iconfont.js放在./src/static/iconfont下。component: false, // 是否生成小程序组件。icon: ‘my-iconfont’, // 图标库名称。fontName: ‘my-icon’, // 字体名称。修改后重新运行指令生成my-iconfont.css。fontSize: ‘16px’, // 默认大小。dirName: ‘’, // 输出文件夹。// 修改为（创建新对象合并属性）// 原代码（报错行）
uniapp 中使用 iconfont
加菲猫的VFP
09-10 546
uniapp 中使用彩色的 iconfont1、在自己图标库项目中下载到本地：2、解压3、shift+右键打开powershell窗口执行一下代码npm install -g iconfont-tools4、在步骤2解压的文件中执行命令行 （shift+右键打开powershell窗口也行）iconfont-tools按一下操作5、目录会多了个iconfont-weapp文件...
uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示
weixin_45333006的博客
05-16 1768
uniapp中使用iconfont-tools实现多色图标，解决在ios空白
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值