微信小程序 iconfont字体图标引入

最新推荐文章于 2025-10-15 14:01:10 发布
原创 最新推荐文章于 2025-10-15 14:01:10 发布 · 522 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文介绍如何从阿里图标库选择并下载图标，通过复制iconfont.css文件内容到.wxss文件，以及在.wxml文件中使用类名或伪元素方式添加字体图标。确保font-family正确设置，以便图标正常显示。
  1. 去 https://www.iconfont.cn/ 阿里图标库，选择图标 加入购物车
  2. 点击 下载代码， 解压 把iconfont.css文件的内容，复制到.wxss文件里
    在这里插入图片描述
    在这里插入图片描述
  3. 然后在 .wxml文件里，用类名的形式 添加字体图标 （font-class 引用）
    在这里插入图片描述
  4. 或者在.wxss文件里，用伪元素的形式 添加字体图标（Unicode 引用）；
    font-family不能丢了，不然不显示；就像3. 类名添加的方式，需要先有 iconfont类一样
    在这里插入图片描述
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 3794
略
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 580
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7514
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
微信小程序引入iconfont图标
最新发布
qq_40682410的博客
10-15 223
如果是第一个引入图标，在网站选好图标之后，点击Font class，点击下载到本地，把代码解压放到项目根目录（一般是放到iconfont文件夹下），把iconfont.css改成iconfont.wxss，然后在app.wxss里引入，如果是在原有项目里新增加了图标，不需要再次下载项目了，直接点击Font class，点击生成在线链接，点击链接，跳转css代码，把代码复制到项目了的iconfont.wxss里就行。用text标签使用图标。
微信小程序引入字体图标
qq_43792295的博客
07-15 348
如下图获取样式代码链接，点击【Font Class】–》【查看在线链接】–》【点击复制代码】上一步中点击确认后会自动跳转到当前项目，或者是点击【资源管理】–》【我的项目】在具体页面的wxss中使用。在全局wxss文件中引入。使用的样式中的如下属性。
微信小程序使用字体图标——链接引入
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-13 3800
【代码】微信小程序使用字体图标——链接引入。
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 6115
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
如何从iconfont中获取字体图标并应用到微信小程序中去？
河西~石头
10-25 1990
下面我们以一个微信小程序的登录界面的制作为例来说明，如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。这里所有的图标，都是从iconfont中以字体的形式来加载的，也就是说，我们自始至终没有使用一张图片。如果这就是你要追求的效果，那么我们下面开始一步一步带你如何实现。
微信小程序引用iconfont图标的方法
10-17
1. 微信小程序中引用iconfont图标的基本概念：iconfont图标，又称字体图标，是一种通过字体文件显示的矢量图标。它可以像字体一样被调整大小、颜色等属性，并且由于是矢量图，它在放大缩小后不会失真。 2. 微信小...
微信小程序 如何引入外部字体库iconfont的图标
08-28
在微信小程序中引入外部字体库，特别是像Iconfont这样的图标库，可以极大地丰富小程序的图形元素，提升用户体验。本文将详细介绍如何在微信小程序中引入并使用Iconfont图标。 首先，你需要访问阿里巴巴矢量字体库...
微信小程序使用字体图标的方法
11-30
在微信小程序中使用字体图标，通常需要遵循一系列步骤，这些步骤与传统的Web前端开发有所不同。...通过以上方法，开发者可以方便地在微信小程序中引入和使用各种字体图标，丰富用户界面的视觉效果。
微信小程序引入 iconfont 图标
dark_cy的博客
06-20 883
　　下图的左上角有三种模式，Unicode、Font class 和 Symbol。选中 Font class 模式，然后点击【点击复制代码】下面的链接，将链接里面的代码（如图二）复制到项目里即可。 　　之前我都是用的 Font class 模式，但是上星期 iconfont 官网维护之后，我加了新图标更新代码的时候弹出了下面的提示，说要下载至本地使用。　　小程序上我还没用过本地的 iconfont 图标，于是我就去百度怎么引入，有些博客说小程序不支持加在本地字体文件，要转成 Base64 的格式引入才可以
微信小程序--引入iconfont
You_wil_see的博客
10-08 337
首先呢，我们先进入阿里的iconfont官方页面：iconfont-阿里巴巴矢量图标库 在其中选入自己选好的图标，点击右上角的购物车中，没注册的先注册， 之后点击font class，在点击获取在线链接，将整段链接复制到微信开发者小程序的一个文件中，我的是styles中的wxss文件， 之后便到全局样式文件app.wxss中导入刚刚的文件。 最后到pages中的demo首页导入icon font.wxss中的类就可以了。 ...
微信小程序引入iconfont
qq_39920109的博客
08-05 3683
微信小程序如何引用阿里iconfont图标库？ 1、进入阿里iconfont官网 https://www.iconfont.cn/；新建一个自己的项目，导入自己需要的icon。 2、将项目里的icon库下载至本地、解压。 3、打开https://transfonter.org/，来转换 ttf 。 点击Add fonts，上传iconfont.ttf。 4、勾选上 Family support , Base64 encode, TTF 三个选项, 点击 “Convert” 进行转化, 然后 “Down
微信小程序项目引入iconfont
Sakiaaa的博客
12-10 488
微信小程序项目引入iconfont 1.打开 iconfont官网，登录账号，找到想要的图标，鼠标移到它上面，点击最上方购物车添加入库： 2.头部购物车图标（从右往左数第三个）显示+1，表示入库成功，点击它查看详情 3.点击下方添加至项目栏 4.点击 加入项目 那一行最右边的文件夹，新建项目 4.项目命名，点击确定（图1），会自动进入项目（图2），点击font class下面的暂无代码，点此生成 图1： 图2： 5.点击生成的代码链接（图1），会自动打开新页面（图2），复制页面内所有的代码，打开
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 996
微信小程序引入 iconfont 矢量图标（Font class ）;
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值