微信小程序引入fontawesome图标

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

#微信小程序

本文详细介绍如何在微信小程序中引入并使用Font Awesome图标库。包括下载图标文件、转换字体为CSS格式、整合样式到wxss及实际调用步骤。

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

fontawesome图标是一套前端使用频繁的icon字体图标库，在微信小程序中同样也可以使用。

1. 下载字体图标，官网链接

2. 找到1中下载的字体图标文件中的如下图.ttf文件


3. 将2中的字体在https://transfonter.org/ 中，转换成css文件

第一步


第二步


第三步


第四步


4. 将3步中得到的css文件中的样式，全部复制粘贴到app.wxss中


5. 将1中下载的字体图标文件中font-awesome.css文件中，除了@fact-face，其余均复制到app.wxss中



6. wxml文件中使用




微信小程序使用font awsome图标库（最新fontawsome5）
小游
12-11 1020
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 1.先去官网下载 我们下载最新版的 http://fa5.dashgame.com/#/ 我们进入webfont的文件夹，上传字体到这个网站：https://transfonter.org/ 我们用下面这个 最后得到的内容 我们只需要css文件就可以了 把里面的文件自己复制到wxss文件里面 找到在font-awesome下载的文件里的font-awesome.css文件，并和第四步同样的操作：在微信小程序里新建一个font-.
微信小程序—使用font-awesome图标库（图文）
Poppy_LYT的博客
08-21 2970
微信小程序—使用font-awesome图标库 第一步：去官网下载font-awesome字体包 font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 3803
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
01-微信小程序中如何使用阿里字体图标
最新发布
kennyssasas的博客
06-11 426
把鼠标悬浮到要使用的字体图标上面，然后点复制代码，或者直接复制字体图标的类名(没留意过叫什么，应该是叫类名吧)。然后到项目要使用字体图标页面的wxml，用个微信小程序支持的行内标签(我用的是<i>)，把类名粘贴上去就OK啦！5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss，项目里的每个页面都能使用，如果只是某一个页面用到的话，也可以粘贴到对应页面的wxss文件);进入到项目里面，选择font class方式来使用，如果没有生成过代码的同学点生成，已经有代码的直接复制代码;
小程序中使用font-awesome
m0_63419305的博客
03-12 1387
在小程序项目中使用Font Awesome
微信小程序与font-awesome图标库
weixin_53035812的博客
08-10 411
本文为搬运学习,感谢原文大佬，原文地址:https://zhuanlan.zhihu.com/p/165568293 第一步：去官网下载font-awesome字体包font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
惊！小程序也能引用font-awesome
CanMoHaiYan的博客
06-29 786
小程序引入外部字体文件教程 在这里插入代码片我们知道，字体图标有着许多优点，比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多，不会失真，图标颜色随便调，不言自喻它是咱们web前端的一大好伙伴！ 但当我们开发微信小程序时，也想引用font-awesome怎么办，小程序的样式表是wxss，直接修改font-awesome的后缀名？不不不，事情恐怕没那么简...
微信小程序中如何使用fontawesome6的免费图标
ShadowSun的专栏
10-17 1607
一、官网下载fontawesome6二、使用transfer编码成Base64首先先把刚刚下载的fontawesome6解压，将文件夹中的字体上传（点击“Add fonts”按钮）到transfonter，打开再点击Download下载即可，将刚刚下载的文件解压，得到如下文件目录。
小程序支持fontawesome网络字体显示
caixiaoxun的专栏
05-16 787
1、官网下载fontawesome字体。 2、解压得到 3、将fontawesome-webfont.ttf上传至https网络目录 4、将font-awesome.css改名为font-awesome.wxss放至小程序资源目录 5、app.wxss增加字体资源加载引用 @font-face { font-family: 'FontAwesome'; src: url("https://www.xxx.com/xxx/fontawesome-webfont.ttf") f
微信小程序引入使用fontawesome6懒人包下载即用
08-08
微信小程序引入使用fontawesome 写好的包是6.4.2版本，超过了的新图标用不了哦，记得筛选一下版本。 下载来记得在微信小程序的全局样式app.wxss导入根目录下的fontawesome.wxss 然后就可以美美从fontawsome官网找...
微信小程序集成Font Awesome图标教程：从下载到应用详解
在微信小程序开发中，引入Font Awesome图标是一项常见的美化和增强用户体验的功能。Font Awesome是一个流行的开源图标库，提供了丰富的矢量图形，可用于各类UI设计。以下是详细介绍如何在微信小程序中集成Font ...
微信小程序使用font-awesome.zip
01-11
"微信小程序使用font-awesome.zip"这个压缩包文件，显然涉及到在微信小程序中集成`Font Awesome`图标库的使用。 `Font Awesome`是一个广泛使用的图标库，提供了大量的矢量图标，可以方便地用于网页和应用程序的界面...
微信小程序使用font-awesome
01-27
WeApp-FontAwesome 微信小程序使用font-awesome图标库 下载font-awesome字体包 打开网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中 @font-face { font-family: 'fa'; src: url([removed]AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//w
微信小程序使用Font Awesome
征途人生&梦
06-23 730
下载Font Awesome，然后解压到项目的static目录下。 修改css后缀为wxss 编辑font-awesome.wxss的字体目录 @font-face { font-family: 'FontAwesome'; src: url('/static/awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('/static/awesome/fonts/fontawesome-webfont.eot?#iefix&amp
微信小程序中引用FontAwesome字体
大白能的博客
08-03 1万+
1.到Font Awesome官网下载字体包官网链接:Font Awesome中文官网2.打开1中下载的压缩包找到.ttf文件如下图所示: 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载如下图所示: 下一步 4.打开3中下载的文件，找到stylesheet.css5.在桌面新建一个fontAwesome.wxss文件6.
微信小程序 如何引入外部字体库iconfont的图标
weixin_42619706的博客
07-10 406
微信小程序 如何引入外部字体库iconfont的图标 首先去https://www.iconfont.cn/ 选取图标加入购物车，并生成 将此段代码放入app.wxss中，然后将包下载到目录下， 之后再组件中引入 <icon class="iconfont icon-xiangshui"></icon> 就ok了！！！！！！！ ...
【小程序】使用font-awesome字体图标的解决方案（图文）
热门推荐
【敦厚的曹操】的专栏
06-27 2万+
使用font-awesome字体图标的解决文案（图文）
font-awesome字体图标库在微信小程序中的使用
Y00010010的博客
04-21 1574
1.下载font-awesome 官网地址：https://fontawesome.dashgame.com 下载解压后得到文件如下： 2.利用tansfonter CSS @ font-face生成器转换字体文件 transfonter官网：https://transfonter.org 按照如下步骤操作解压下来得webfont.ttf文件： 3.在微信小程序中使用 转换后得到如下文件： （1）复制stylesheet.css文件到微信小程序，并更改文件为font-awesome-stylesh
bfont-awesome-4.7.0 稳定版本 下载介绍
gitblog_06709的博客
05-05 825
bfont-awesome-4.7.0 稳定版本 下载介绍 【下载地址】bfont-awesome-4.7.0稳定版本下载介绍 Font Awesome 4.7.0 是一款广受欢迎的前端图标字体库，提供丰富多样的矢量图标，适用于各种网页设计场景。无论是滑冰、滑雪等运动图标，还是其他常用符号，Font Awesome 都能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值