微信小程序引用fontawesome字体

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

#css #微信 #字体 #base64 #压缩

本文介绍如何将Font Awesome图标库引入微信小程序项目中。主要包括从官网下载字体包、转换字体文件为Base64编码、将样式表内容整合到小程序样式文件(app.wxss)中等步骤。

1.到fontawesome官网下载字体包。

2.打开1中下载的压缩包找到.ttf文件。



3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载.



4.打开3中下载的文件，找到stylesheet.css.



5.打开4中的文件，复制里面的代码到微信小程序中的app.wxss中。




6.打开1中的文件font-awesome.css,复制里面的css(去掉@font-face部分)到微信小程序中的app.wxss中（接着5中复制内容的后面）。








7.然后再程序中直接引用就可以了。实例代码 <text class="fa fa-camera-retro fa-lg">图标</text>




yiyingcsdn
关注
微信小程序—使用font-awesome图标库（图文）
Poppy_LYT的博客
08-21 3214
微信小程序—使用font-awesome图标库 第一步：去官网下载font-awesome字体包 font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
小程序使用自定义字体
qq_49012497的博客
08-06 826
如果你在小程序中要用这个字体包时，你要改变的文字，必须是在demo中出现的文字，不然的话，在小程序中是没有变化的，所以，你想改变，就只能先在demo.html把你需要的文字加进去压缩。这个是字体转base64格式的网址：https://transfonter.org/安装语句 npm install font-spider -g。下载后会得到一个压缩包，解压完会得到这样的文件夹。按照下面步骤，把之前字体压缩包，按照流程走一遍。我截了个图说明一下，大家可以看看。
微信小程序使用font-awesome图标库
03-29
网上看到的方法，亲测成功：参考方法 下载font-awesome字体包 打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中 @font-face { font-family: 'fa'; src: url([removed]AAEAAAANAIAAAwBQRkZUTXLOMI
Font Awesome图标字体文件格式对比：WOFF、WOFF2、TTF等
最新发布
gitblog_00077的博客
10-01 431
Font Awesome作为互联网上最受欢迎的图标库和工具包，被数百万设计师、开发者和内容创作者广泛使用。在其最新的7版本中，提供了多种字体文件格式以适应不同的应用场景和性能需求。本文将深入对比Font Awesome中常见的字体文件格式，包括WOFF、WOFF2、TTF等，帮助你在实际项目中做出最优选择。 Font Awesome的字体文件主要存放在项目的[webfonts/](https:/...
font-awesome字体图标库在微信小程序中的使用
Y00010010的博客
04-21 1678
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
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 4200
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序引入Font Awesome-icon
03-29
2.2 解压下载好的 fontawesome-free-5.0.13.zip 2.3 点击网址上的Add fonts：(此图片来源于网络，如有侵权，请联系删除! ) 点击Add fonts 2.4 进入fontawesome-free-5.0.13\web-fonts-with-css\webfonts 选中fa-...
微信小程序息屏、返回、还是Home键操作，引用fontawesome字体图解 ..
03-29
我们公司在做一个客户端和小程序互相控制的小程序，两者都可以控制用户是否退出，因为安卓手机第一次扫码进来会触发onload方法，但是第二次扫码进入小程序，就直接进入到上次退出的界面，只会触发onShow方法，现在...
微信小程序使用font-awesome
01-27
微信小程序使用font-awesome图标库 下载font-awesome字体包 打开网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开...
小程序中使用font-awesome
m0_63419305的博客
03-12 1568
在小程序项目中使用Font Awesome
微信小程序中引用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.
微信小程序中如何使用fontawesome6的免费图标
ShadowSun的专栏
10-17 1852
一、官网下载fontawesome6二、使用transfer编码成Base64首先先把刚刚下载的fontawesome6解压，将文件夹中的字体上传（点击“Add fonts”按钮）到transfonter，打开再点击Download下载即可，将刚刚下载的文件解压，得到如下文件目录。
UniApp转微信小程序之引入FontAwesome图标
qq_46797048的博客
10-19 1104
解决微信小程序中无法使用FontAwesome图标问题，将ttf的文件转化为base64格式即可
【小程序】使用font-awesome字体图标的解决方案（图文）
热门推荐
【敦厚的曹操】的专栏
06-27 3万+
使用font-awesome字体图标的解决文案（图文）
vue3+ts开发微信小程序----使用FontAwesome图标的步骤（只适用于面性图标）
heavenz19的博客
04-25 963
因为用的vue3+ts 但是对于npm引进FontAwesome来说，好像对于小程序不支持，所以用了引入文件的方式。
微信小程序使用Font Awesome
征途人生&梦
06-23 830
下载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网络字体显示
caixiaoxun的专栏
05-16 797
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
【微信小程序】使用自定义字体
要加油
09-02 8279
微信小程序使用自定义字体 文章目录微信小程序使用自定义字体1. 微信小程序默认支持的字体2. 自定义字体获取3. 文字提取和字体ttf文件压缩4. 字体ttf文件转Base64格式 1. 微信小程序默认支持的字体 在小程序的.wxss 中对字体进行样式定义，如 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, ans-serif ; 显示效果如下图： 但是由于微信支持的字体非常有限，不能满足个性化的需求，因此在开发的过程中可能会需要使用自定义字体。 小程
微信小程序引入fontawesome
08-28
在微信小程序中引入和使用 Font Awesome 图标库，可以按照以下步骤进行操作： ### 引入 Font Awesome 1. 从 [Font Awesome 官网](https://fontawesome.com/) 下载所需版本的图标库文件。 2. 解压下载的文件，找到其中的 `font-awesome.css` 文件。 3. 在微信小程序项目中创建一个新的文件，命名为 `font-awesome.wxss`，并将 `font-awesome.css` 文件中的内容粘贴到此文件中。注意：**删除 `@font-face` 部分的内容**，这部分定义了字体的路径，但在微信小程序中需要单独处理[^2]。 ### 修改字体路径 在 `font-awesome.wxss` 文件中，找到 `@font-face` 的定义部分，并将其修改为指向微信小程序本地的字体文件路径。例如： ```css @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&v=4.7.0') format('embedded-opentype'), url('/static/awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/static/awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/static/awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/static/awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } ``` 确保字体文件的实际路径与上述 URL 中的路径一致，并将这些字体文件放置在小程序项目的正确目录下（如 `/static/awesome/fonts/`）[^4]。 ### 使用 Font Awesome 图标 在 `app.wxss` 文件中引入 `font-awesome.wxss`： ```css @import "css/font-awesome.wxss"; ``` 然后，在 WXML 文件中使用图标，例如： ```xml <text class="fa fa-user"></text> ``` ###
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值