微信小程序之如何使用iconfont图标？

最新推荐文章于 2025-04-21 10:40:12 发布

暖暖不挑食

最新推荐文章于 2025-04-21 10:40:12 发布

阅读量1.1k

点赞数 2

分类专栏：微信小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/yuanzi__/article/details/119795032

版权

本文介绍了如何在微信小程序中使用iconfont图标，包括从iconfont下载图标，将ttf文件转换为base64格式，合并样式代码，并在微信开发者工具中引入和使用这些图标。

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

文章目录

一、下载iconfont图标

1.进入iconfont，选择要下载的图标，点购物车添加入库

在这里插入图片描述

2. 添加至项目

在这里插入图片描述

3. 下载至本地

在这里插入图片描述

二、如何引入？

1. ttf文件转换base64格式

进入https://transfonter.org/，点击Add fonts选择文件，打开Base64 encode和TTF按钮，然后点击Convert转换。
在这里插入图片描述
点击Download下载

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

暖暖不挑食

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标

时光の尘的博客

03-03

5817

在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！

微信小程序使用 iconfont 彩色图标

我是写BUG的博客

10-19

476

当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序中使用iconfont(阿里矢量图标字体)

最新发布

DMU_soft的博客

04-21

595

在微信小程序中使用iconfont图标库以及使用iconfont本身的颜色图标

微信小程序中引入iconfont阿里矢量图库

m0_48432283的博客

03-03

733

阿里巴巴图标iconfont网址 iconfont网址 :https://www.iconfont.cn/ 登录网站搜索相应图标将想要的图标添加到购物车车里；添加图标到项目新建项目完成后，自动跳转，之后选择下载至本地； 4. 图标下载 5. 下载后解压，会发现有个iconfont.css文件，打开编辑并复制其中的内容。 ```css @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=16147377185

微信小程序引用iconfont-实测版

忆凌波的专栏

07-05

2376

1.H5引用图标库的方式为URL引入，但是在小程序中不支持 URL方式，需要使用base64方式直接引入@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#ief...

微信小程序中使用 iconfont 图标的四种方法

qq_43477721的博客

07-20

7993

1. 先去 iconfont 官网选择自己需要的图标，添加到项目中点击红框在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i

微信小程序开发--如何使用字体图标

qq_40407998的博客

07-03

1000

第一步：下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标流程为：选中需要的图标—>点击“添加入库”–>点击购物车进入购物车–>点击下载代码按钮。点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容：第二步：转换ttf文件进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式。流程如下：点击Add fonts --> 添加刚才下载的文件夹里的ico

微信小程序中使用iconfont的详细教程

AI小美好

11-24

2890

本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。

微信小程序引用iconfont图标的方法

10-17

微信小程序引用iconfont图标的方法知识点： 1. 微信小程序中引用iconfont图标的基本概念：iconfont图标，又称字体图标，是一种通过字体文件显示的矢量图标。它可以像字体一样被调整大小、颜色等属性，并且由于是...

uniapp引用iconfont字体图标

沈楷洋的博客

02-19

668

一、选好图标后在APP.vue中进行配置 <style lang='scss'> /* 全局公共样式和字体图标 */ @font-face { font-family: "iconfont"; font-weight: normal; font-style: normal; src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype'); } </style

如何在微信小程序开发中引入图标

song_dehao的博客

10-29

2379

1.在iconfont中将需要的图标加入至购物车 2.选择下载代码 3.将下载好的代码解压缩 4.使用cmd命令进入到解压之后的文件夹中 5.输入cnpm install -g iconfont-tools命令，下载转换工具 6.输入iconfont-tools命令，得到如下图所示文件 7.将xx-weapp文件夹中的xxx.wxss引入即可 ...

微信小程序开发引入图标库

lijianping962464的博客

09-24

593

微信小程序开发引入图标库去阿里巴巴图标库选择自己需要到图片添加到购物车，然后添加到项目下载到本地，如图：下载zip包解压，进入https://transfonter.org/，点击Add fonts上传iconfont.ttf文件，如图：然后依次勾选Base64 encode、TTF，点击Convert，如图：下载转换后的zip包：第1步下载的zip包解压后，打开文件iconfont.css，把里面除@font-face外的其他部分复制，如图红框部分复制粘贴到第2步zip包中stylesh

微信小程序--icon引入外部图标

rta_bh的博客

09-16

3497

本博客仅仅只是个意外。大佬请绕道。第一步：搭建框架首先你得有个微信小程序的开发工具，然后把小白架构搭建好。（不会去看官网）。简单的初步框架搭建完之后目录和界面是这个样子：如果想加一个底部tab框，只需要在pages目录下新建个目录，然后在新建个pages就OK了。创建好之后再app.js里会自动加入此目录，但是不会显示底部tab框。这里就要看官网的tabBar如何说明的了，只需要改下app.js，代码： { "pages": [ "pages/...

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

m0_63622279的博客

09-09

3221

将这些解压的资源全部拷贝到微信小程序的assets目录中，并且将iconfont.css重命名为iconfont.wxss。首先在当前项目的根目录中，创建assets文件夹，用于存放静态资源，assets里面的文件夹可以自己定义，图片，css…添加一个图标到iconfont项目中，点击生成在线链接，记得选unicode，然后再生成在线链接（待会儿会使用）然后对iconfont.wxss进行编辑修改，将刚刚复制的在线链接，替换掉本地的链接。下载完毕之后，将压缩包解压，会得到类似下面的目录结构。

微信小程序的按钮怎么添加图标icon？

【猿来入此】

06-27

5144

1. 在你需要添加按钮的页面的json文件中，引入icon组件的自定义组件库。其中，`type`属性表示要显示的图标类型，具体的图标类型可以参考对应的icon组件库文档。`size`属性表示图标的大小，单位为rpx。2. 在页面的wxml文件中，使用``标签来表示图标。3. 将``标签放置在一个``标签内，即可实现一个带图标的按钮。在微信小程序中，可以使用icon组件来添加图标。其中，`/path/to/icon/icon`是你所引入的icon组件的路径。

小程序开发--开发者工具的插件推荐

余的日常学习

03-22

6529

小程序开发--开发者工具的插件推荐

[工具-002]把png图片转换成ico图标

weixin_30530523的博客

05-18

291

　　最近我收到了上级的一个需求，我们需要使用产品的png图片，批量转换成ico图片，然后调用上一篇的方法，替换可执行程序的图标。一开始查看资料的时候，C#有直接可以转成ico图片的方法，很简单。但是生成的质量不敢恭维。后面蔡领导不满意，重新寻找解决办法，找了一些C++代码,实现相当麻烦，也很不方便。后面找到了一个png2ico.exe的东西，然后就想到用C#调用CMD命令来完成。好吧，下...

微信小程序icon图标引入

努力搬砖的小码

08-15

2423

微信小程序引入iconfont图标

微信小程序怎么使用iconfont图标库

03-23

好的，我现在需要帮助用户了解如何在微信小程序中集成和使用iconfont图标库。首先，我应该回忆一下用户提供的引用内容，看看有哪些信息可以利用。用户给出了五个引用，都是关于微信小程序使用iconfont或外部字体的...