微信小程序开发-引入阿里巴巴矢量icon图标库

最新推荐文章于 2025-06-22 16:43:15 发布
最新推荐文章于 2025-06-22 16:43:15 发布
阅读量4.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tang1392/article/details/78927107
本文介绍了如何在微信小程序中使用阿里巴巴矢量图标库。首先从图标库下载图标并保存到项目，接着通过转换网址将iconfont.ttf文件转换。将转换后的样式内容粘贴到iconfont.css，并修改font-size。最后，确保将所有相关文件放置于正确目录，并引入到app.wxss。

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

先在阿里巴巴图标库下载icon图标并保存到项目里，然后下载到本地。此步骤的压缩文件命名为压缩1文件。


解压下载文件，打开转换网址https://transfonter.org/，点击 Add fonts按钮将iconfont.ttf文件上传上去，按图操作就好。此步骤的压缩文件命名为压缩2文件。




解压下载后的文件，将文件内容复制，粘贴到压缩1文件里面的iconfont.css里面，覆盖其@font-face部分，应该能一眼就看出来。



最低0.47元/天 解锁文章

200万优质内容无限畅学
【微信小程序】基础组件-icon图标组件
墨夶的博客
11-22 3282
虽然icon组件提供了多种标准图标，但在实际开发中，可能需要使用自定义图标。icon组件是微信小程序中一个非常有用的组件，它提供了多种标准图标，可以增强用户界面的可读性和交互性。通过合理使用icon组件的属性和嵌套规则，可以显著提升小程序的用户体验。希望本文对你理解和使用icon组件有所帮助。😊。
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
美奇软件开发工作室
11-06 2090
一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon 2、把需要的图标加入购物车，然后再添加到项目里 3、打开项目，选择“Font class”类型，点击下载至本地 二、创建icon组件 1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...
【微信小程序---如何引入阿里巴巴图标步骤】
m0_56349322的博客
02-23 1512
1.iconfont-阿里巴巴矢量图标库下载图标 2. 3. 4 5 6
关于微信小程序中如何使用阿里图标库
最新发布
weixin_67093879的博客
06-22 608
本文详细介绍了如何在微信小程序中集成阿里图标库的字体图标。首先需要在阿里图标库注册账号、创建项目并下载图标文件。然后在小程序中创建专用目录存放字体文件，修改CSS路径引用。最后在全局样式中引入图标样式，并通过class名直接使用图标。该方法支持自定义图标样式，为小程序开发提供了便捷的图标管理方案。
在微信小程序中引入 Iconfont 阿里巴巴图标库
weixin_34233856的博客
05-02 410
小程序的代码包不能超过4M，为了压缩代码包的大小，可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库，这里介绍一下在微信小程序引入 Iconfont 的方法 一、下载图标 首先挑选图标，添加入库 然后添加至项目 然后在“我的项目”中，将资源文件下载到本地 建议设置为 font class 二、在项目中引入资源 在小程序项目中建...
微信小程序引入阿里矢量图标库
bibolibo的博客
07-05 1414
微信小程序引入阿里矢量图标库阿里矢量图标库使用阿里矢量图标库的好处：使用方法:准备步骤网络路径引用本地引用:微信小程序代码片库 阿里矢量图标库 阿里矢量图标库 使用阿里矢量图标库的好处： 大量已设计好的套装图标 ，将会带来全新的使用体验； 可以自行选择大量好看的图标； 重要的是 白嫖!白嫖!白嫖! ； 使用方法: 准备步骤 1.进入阿里矢量图标库: 2.选择一个适合漂亮的图标加入购物车 3.将你在购物车中图标放入自己的分组项目中(多项目时方便管理) 如果没有分组,可以项目管理模块右上角添加一个项目
微信小程序 | 如何引用阿里巴巴Iconfont图标库所给图标
ZM20170703的博客
12-02 1308
保姆级教程，小程序中如何引用官方图标
微信小程序引入阿里巴巴矢量图标库（iconfont字体图标）
estrusKing的博客
11-18 923
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就需要把平时的iconfont字体图标远程路径换成base64引入。
微信小程序中使用自定义图标（阿里icon）的方法
10-18
要在微信小程序中使用阿里云图标，首先需要在项目中引入阿里云图标字体。这通常通过在项目中引入一个外部的字体库链接来完成，或者通过Base64编码的方式内嵌到样式文件中。 3. 使用@font-face规则定义字体 在微信...
微信小程序引入阿里矢量图标
CallMe_CrabXie的博客
03-12 1488
1.先在阿里图标库下载图标，解压找到iconfont.css文件，改为.wxss后缀 2.放入小程序项目文件夹中，在app.wxss中全局引入@import "/libs/iconfont.wxss"; 3.差不多就成功了，在iconfont.wxss文件中找到相应的图标代码 4.在页面中引用：（<view class="iconfont icon-bussiness-man">...
微信小程序使用阿里ICON图标引入方法
qq_43630754的博客
11-02 1793
在微信小程序中使用wxss引入阿里图标，提高加载速度，降低小程序大小，示例：引入鸡腿图标
小程序引入第三方图标（阿里图标）
kanno的博客
03-01 436
小程序引入第三方图标（阿里图标）
【微信技术-微信小程序】------- 微信小程序引用阿里巴巴iconfont图标库样式使用说明
皮皮冰要做大神
01-17 903
1.在阿里巴巴iconfont图标库中下载样式文件.[iconfont-阿里巴巴矢量图标库] 如下: （1）首先选择【unicode】编码方式 然后点击【下载至本地】； （2）下载完毕 进行解压 然后打开解压完成之后的文件找到【iconfont.ttf】如下: 2.对文件进行转码【base64】让微信小程序支持此样式；如下： （1）点击【Add fonts】选择【iconfont.ttf】文件 在勾选其他配置； （2）点击【Convert】开始进行转换、出现【Download】然后..
微信小程序引入外部icon（阿里巴巴矢量图标）
苏苏就是小苏苏的博客
01-19 4687
1.实现效果 2.实现步骤 阿里巴巴矢量图标库 搜索想要的图标，添加购物车。 添加进自己的项目中 获取代码（注意：当项目更新之后，该代码也需更新） 3.实现代码 新建一个iconFont.wxss,复制上面所得的代码。 /* 当添加新的图标之后，@font-face需要进行更新 */ @font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.alicdn.com/t/font_2361238
小程序使用阿里巴巴矢量图标库
m0_71774042的博客
04-23 1301
最后点进网址，复制到自己的app.wxss中。点击项目后进入下一步骤。
微信小程序——引入 iconfont 矢量图标，如何使用引用阿里巴巴矢量图标
通往成功之路的一个过客
09-19 2077
本文介绍如何在小程序中加入图标，如何使用引用阿里巴巴矢量图标
微信小程序使用自定义图标，使用阿里图标库教程
weixin_44235659的博客
07-02 4110
手把手教你在微信小程序中使用第三方图标，如阿里图标库。
微信小程序引入阿里巴巴图标
03-30
<think>好的，我现在需要帮助用户在微信小程序中引入并使用阿里巴巴图标库。根据用户提供的引用内容，我需要仔细整理步骤，确保正确性。 首先，用户提到了引用[1]到[5]，这些引用详细说明了下载图标、处理字体文件、转换格式以及引入到小程序中的步骤。我需要综合这些信息，分步骤说明。 第一步是下载图标。根据引用[1]，用户需要到阿里巴巴图标库选择图标并添加到项目，然后下载到本地。这里需要注意保存的项目结构和文件命名，比如压缩文件命名为“压缩1文件”。 接下来是处理字体文件。根据引用[4]，微信小程序不支持直接在wxss中引入.ttf等字体文件，在开发工具可能有效，但手机上不行。所以需要将.woff2文件转换为Base64。用户提到了使用File To Base64 Encoder这个工具，转换后得到Base64字符串，替换原来的字体路径。这一步很重要，否则图标可能无法在真机上显示。 然后是引入样式文件。引用[2]和[5]提到，需要将iconfont.css的内容复制到小程序的wxss文件中。比如在项目中创建/static/iconfont目录，新建fonts.wxss，并将转换后的Base64代码粘贴进去。同时，引用[3]指出，需要在全局样式文件（如app.wxss）中使用@import引入这个wxss文件，确保全局可用。 接下来是使用图标。用户需要在wxml中使用对应的类名，比如class="iconfont icon-xxx"。但要注意，微信小程序的标签是<text>而不是<i>，所以需要调整标签。 最后是注意事项，比如图标的Unicode编码是否正确，是否在全局引入样式，以及图标大小的调整可能需要通过font-size来控制。 现在需要检查是否有遗漏的步骤。比如引用[4]提到的转换步骤是否正确，是否所有必要的字体格式都被处理。同时，是否需要考虑不同浏览器的兼容性，但根据引用[4]，woff2已经是推荐格式，只需转换即可。 另外，用户可能遇到的问题包括图标不显示，这时候需要检查Base64是否正确，路径是否正确，类名是否匹配，以及是否在全局引入了样式文件。这些都需要在步骤中详细说明，帮助用户避免常见错误。 总结下来，步骤应该是：下载图标库、转换字体文件、创建并配置wxss文件、全局引入样式、使用图标。每一步都需要明确说明，并参考对应的引用来源，确保用户能够顺利操作。</think>### 微信小程序引入阿里巴巴图标库的步骤 #### **1. 下载图标文件** - 访问[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择图标并添加到项目。 - 下载项目文件到本地（压缩包默认包含`.ttf`、`.woff`等字体文件和`iconfont.css`）[^1]。 --- #### **2. 转换字体文件为Base64** - 由于微信小程序不支持直接引入`.ttf`/`.woff`文件（真机不生效），需将`.woff2`文件转换为Base64编码： 1. 打开[File To Base64 Encoder](https://www.giftsofpeed.com/file-to-base64/)工具。 2. 上传下载的`iconfont.woff2`文件，生成Base64字符串[^4]。 3. 替换`iconfont.css`中的字体路径： ```css @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,生成的Base64字符串) format('woff2'); } ``` --- #### **3. 创建并配置样式文件** - 在小程序项目中新建目录`/static/iconfont`，并创建`iconfont.wxss`文件。 - 将修改后的`iconfont.css`内容复制到`iconfont.wxss`中[^2][^5]。 - 在全局样式文件`app.wxss`中引入该文件： ```css @import "/static/iconfont/iconfont.wxss"; [^3] ``` --- #### **4. 使用图标** - 在WXML文件中通过`<text>`标签和类名调用图标： ```html <text class="iconfont icon-图标名称"></text> ``` - `icon-图标名称`需替换为图标库中具体的Unicode名称（如`icon-home`）。 --- #### **注意事项** 1. **兼容性**：优先使用`.woff2`格式并转换为Base64以确保兼容性[^4]。 2. **图标大小**：通过`font-size`调整图标尺寸，例如： ```html <text class="iconfont icon-home" style="font-size: 40rpx;"></text> ``` 3. **常见问题**：若图标不显示，检查： - Base64编码是否正确 - 类名是否与图标库中一致 - 全局样式是否引入成功 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值