微信小程序iconfont图标字体解决方案

最新推荐文章于 2025-06-11 16:59:17 发布
最新推荐文章于 2025-06-11 16:59:17 发布
阅读量5.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dounine/article/details/79629265
本文详细介绍如何在小程序中使用Iconfont字体图标。包括登录iconfont.cn网站、新建项目、收藏图标、下载并配置资源文件等步骤。通过简单的示例代码展示如何在wxml文件中调用图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

此文演示如何在小程序上使用iconfont字体图标。

使用说明

登录阿里巴巴iconfont.cn
image.png
新建项目
image.png
点击icon收藏
image.png
加入到test项目中
image.png
下载到本地解压
image.png
生成代码
image.png
复制iconfont.css到xxx.wxss
image.png
替换iconfont.css中的@font-face为上面的生成代码
image.png
xxx.wxss样式中@import使用

@import "../../../css/test.wxss";

wxml中使用

<text class='iconfont icon-home' style='color:#7F8389;font-size:60rpx;'></text>

显示结果
image.png

dounine
关注
微信小程序中使用iconfont的详细教程
AI小美好
11-24 2981
本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。
微信小程序使用阿里巴巴iconfont
nimingyibo的博客
05-10 476
1.官网地址: .iconfont-阿里巴巴矢量图标库 2.打开我的项目新建项目 3.填写一个名字即可 4.搜索出你需要使用的图标 5.添加入库 添加入库后 右上角有一个购物车会显示 6.添加至刚刚创建的项目 7. 回到本地项目点击下载到本地然后解压下载的压缩包 8.把解压后文件里面的css复制进项目里 css文件改成wxss其他的不用管 9.在你需要使用图标的页面的wxss中导入字体图标样式 10.在哪里引用就输入字体图标的ico...
微信小程序使用iconfont彩色图标
qq_43480830的博客
10-08 1235
微信小程序使用iconfont彩色图标
01-微信小程序中如何使用阿里字体图标
最新发布
kennyssasas的博客
06-11 420
把鼠标悬浮到要使用的字体图标上面，然后点复制代码，或者直接复制字体图标的类名(没留意过叫什么，应该是叫类名吧)。然后到项目要使用字体图标页面的wxml，用个微信小程序支持的行内标签(我用的是<i>)，把类名粘贴上去就OK啦！5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss，项目里的每个页面都能使用，如果只是某一个页面用到的话，也可以粘贴到对应页面的wxss文件);进入到项目里面，选择font class方式来使用，如果没有生成过代码的同学点生成，已经有代码的直接复制代码;
微信小程序 07 iconfont
小哞^同^学的技术博客
07-10 305
在 阿里矢量图标库 里，新建一个 项目，然后把 需要的 图标 都传到 这个项目里。再去 下载 相关的 文件 到本地！ 改变一下 @font-face 里面的 url 路径。 4. 直接 在 text 里面 的 class 属性 就可以使用这些 图标了。...
小程序中iconfont不显示问题
qi__lu的博客
06-23 1754
近期在写小程序的时候，用到了阿里巴巴的字体库，但是有的显示，有的不显示，百度了很久，也没有找到解决的办法，中午吃完饭，突然有点儿明白了 icon字体 不能 在display的值是line的元素里 因为icon标签默认的display的值是inline-block，就像是行内块元素在一个行内元素里边一样，所以不显示，最后改了icon外边一层的display值以后，图标显示了 ...
微信小程序Skyline渲染模式下，iconfont字体的使用！
yanghongfei110的博客
04-26 873
微信小程序转skyline渲染，iconfont字体失效，不显示问题。
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序中使用自定义图标（阿里icon）的方法
10-18
总结来说，在微信小程序中使用自定义图标（如阿里云图标字体）涉及到引入字体文件、设置和使用@font-face规则以及利用CSS样式展示图标等技术环节。通过理解这些知识点，开发者可以有效地在微信小程序中展示丰富的...
微信小程序使用字体图标的方法
10-16
这种方法虽然与传统Web前端开发有所不同，但提供了在微信小程序环境下使用字体图标的简洁解决方案。通过这些步骤，开发者可以方便地在小程序中添加个性化的图标，提升小程序的视觉效果和用户体验。
微信小程序 组件使用iconfont字体图标不显示
06-08
对于微信小程序中使用 iconfont 字体图标不显示的问题，以下是完整的解决方案和排查步骤： ### 解决方案 1. **正确引入字体文件** - 将下载的 `iconfont.ttf` 文件通过 [Iconfont转换工具]...
微信小程序使用 iconfont-阿里巴巴 彩色图标库
weixin_47174945的博客
11-01 728
1.进入https://www.iconfont.cn/官网 2将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 3打开目标项目，下载代码至本地 4将下载的文件进行压缩，命名为iconfont 5 切换到iconfont文件夹 ，在地址栏中输入cmd ----点击enter键 6输入命令行：npm install -g iconfont-tools----点击enter键 7运行命令行： iconfont-tools----点击enter键 8出现如图所示的内容，按图示输入文件名即可 9打
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
qq_45593068的博客
10-04 1625
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用 安装iconfont-tools npm i -g iconfont-tools 全局安装工具 下载iconfont并使用工具 在下载iconfont下 # 下载的iconfont.js目标文件下, 一直回车即可 iconfont-tools 生成iconfont-wapp文件 一直回车, 默认是t-icon前缀 非sass小程序用.wxss即可，sass小程序和uniapp可以用
小程序 iconfont在真机显示不了
LlanyW的专栏
06-13 677
默认的url只能在模拟器上用。需要转成base-64。
小程序iconfont图标真机测试不显示的解决方案
m0_68652823的博客
03-29 1259
小程序iconfont图标真机测试不显示的详细教程
微信小程序如何引入彩色iconfont图标？
a896532147的博客
12-13 1118
3，打开iconfont文件将文件名称为”iconfont-weapp“复制到小程序艮目录下，并创建文件名称为”",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下。点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。4，引用：在小程序的app.wxss文件中引入。出现如下内容，点击enter默认即可。">（去掉icon-)1，在阿里云矢量图官网："style"的文件夹下，
记录uni-app开发微信小程序踩过得坑，包括iconfont不显示、v-if插槽上不生效、pdf在线预览等
qq_38118138的博客
12-30 6481
记录uni-app开发微信小程序踩过得坑，包括iconfont不显示、v-if插槽上不生效、pdf在线预览等
iconfont图标不显示的解决方式
m0_57342122的博客
04-18 2956
iconfont图标不显示的解决方式
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 5941
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值