惊！小程序也能引用font-awesome

最新推荐文章于 2024-09-28 14:22:16 发布
最新推荐文章于 2024-09-28 14:22:16 发布
阅读量717 收藏
点赞数
分类专栏： css 前端 小程序 文章标签： 小程序 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canmohaiyan/article/details/93252359
版权
前端 同时被 3 个专栏收录
21 篇文章 0 订阅
订阅专栏
css
10 篇文章 0 订阅
订阅专栏
小程序
1 篇文章 0 订阅
订阅专栏

小程序引入外部字体文件教程

在这里插入代码片我们知道，字体图标有着许多优点，比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多，不会失真，图标颜色随便调，不言自喻它是咱们web前端的一大好伙伴！

但当我们开发微信小程序时，也想引用font-awesome怎么办，小程序的样式表是wxss，直接修改font-awesome的后缀名？不不不，事情恐怕没那么简单。。。在小程序里，它是不能识别外部字体文件的。我们要向使用这些字体图标，那么嘿嘿，就得通过“歪门邪道”啦！首先说明一下，这个方法也是我从网上学来的，本文主要是把我所学到的方法通过个人理解后整理。作为学习笔记以便以后翻看。
正文开始！

font-awesome.wxss文件的使用方法

打开网站 https://transfonter.org/

我们首先点一下这个按钮在这里插入图片描述在font-awesome的文件夹里找到字体文件（后缀名为ttf）
在这里插入图片描述在这里插入图片描述
上传完成后，我们打开这个开关，它的意思是将我们上传的字体文件转码为Base64格式
在这里插入图片描述
随后我们点击convert（转换）
在这里插入图片描述
转码完成后点击下载
在这里插入图片描述
接下来解压这个文件，然后打开这个文件
在这里插入图片描述
接着打开原font-awesome文件夹里的css文件
在这里插入图片描述
对比这两个文件，咱们可以发现，这两个文件（左边是font文件，右边是用网站处理后生成的stylesheet.css文件）都有@font-face部分，我们接下来用右边的@font-face（也就是stylesheet.css文件的全部内容）替换掉左边的@font-face部分，最后将文件保存，并把把后缀名改为wxss（为了不破坏原来的font-awesome.css文件，建议你复制一份出来单独改动它）。
在这里插入图片描述
改动后就是下面这个样子了?
在这里插入图片描述
好了，所需的文件做好了。万事具备，只欠import！（坏笑）

font-awesome.wxss文件的使用方法

  1. 将font-awesome.wxss文件放进小程序工程的根目录
  2. 打开app.wxss文件
  3. 在文件开头添加引用语句@import "./font-awesome.wxss"; (双引号里的是font-awesome.wxss文件的路径)

然后然后。。。嘿嘿，就可以直接在小程序wxml文件里运用font-awesome图标了。
完结~撒花
在这里插入图片描述

残墨海颜
关注
专栏目录
微信小程序—使用font-awesome图标库（图文）
Poppy_LYT的博客
08-21 2754
微信小程序—使用font-awesome图标库 第一步：去官网下载font-awesome字体包 font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
微信小程序中引用FontAwesome字体 最完整教程 附下载源码
naileiforever的专栏
08-02 2486
目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼 主要步骤,下载>转码>合并样式>引用 样式,不会的可下载源码 1.到Font Awesome官网下载字体包 官网链接:Font Awesome中文官网 2.打开1中下载的压缩包找到.ttf文件 如下图所示: 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ...
小程序中使用font-awesome
m0_63419305的博客
03-12 788
在小程序项目中使用Font Awesome
FontAwesome图标集成至Axure的部件库使用指南
最新发布
weixin_33608403的博客
09-28 1125
本文还有配套的精品资源，点击获取 简介：FontAwesome是一个包含数千个矢量图标的开源库，支持多种格式，便于设计师和开发者在网站中添加高质量图标。 FontAwesome部件库 是一个专门针对Axure设计的资源库，它将FontAwesome图标集转化为Axure可直接使用的部件，简化了原型设计流程。本文提供了下载、导入、使用FontAwesome部件库...
微信小程序中引用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.
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 2773
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序引入Font Awesome-icon
weixin_33843409的博客
12-10 254
1下载最新版本Font Awesome 选择最新免费使用版本下载：https://www.thinkcmf.com/font_awesome.html 2 将字体转换为 BASE64 2.1 进入转换网站 transfonter.org https://transfonter.org/ 2.2 解压下载好的 fontawesome-free-5.0.13.zip 2.3 点击网址上的Add ...
微信小程序使用font-awesome.zip
01-11
2. **样式引用**：在`wxss`文件中，你需要定义`@font-face`规则来引用上传的字体文件，这样小程序就能识别并加载这些图标。例如： ```css @font-face { font-family: 'FontAwesome'; src: url('网络路径/to/your...
fontawesome-free-5.15.3-web.zip
03-18
首先，Font Awesome 5分为免费和付费两个版本，"fontawesome-free-5.15.3-web.zip"提供的是免费部分，这包括了大量的基本和常见的图标，适用于大多数网站和应用程序的需求。在5.15.3这个版本中，你可以期待找到一...
Font-Awesome-3.2.1
12-22
Font-Awesome是一款广泛使用的图标库，尤其在前端开发领域中极为流行。它将矢量图形与Web字体技术相结合，提供了大量的图标供开发者在网页设计和应用程序中使用。3.2.1是Font-Awesome的一个版本，这个版本可能包含了...
微信小程序引入使用fontawesome6懒人包下载即用
08-08
微信小程序引入使用fontawesome 写好的包是6.4.2版本，超过了的新图标用不了哦，记得筛选一下版本。 下载来记得在微信小程序的全局样式app.wxss导入根目录下的fontawesome.wxss 然后就可以美美从fontawsome官网找...
微信小程序使用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.wxss
09-02
将font-awesome.ttf 转成微信小程序支持的格式 font-awesome.wxss
微信小程序引入fontawesome图标
weixin_37861326的博客
06-11 2718
fontawesome图标是一套前端使用频繁的icon字体图标库，在微信小程序中同样也可以使用。1. 下载字体图标，官网链接2. 找到1中下载的字体图标文件中的如下图.ttf文件3. 将2中的字体在https://transfonter.org/ 中，转换成css文件第一步第二步第三步第四步4. 将3步中得到的css文件中的样式，全部复制粘贴到app.wxss中5. 将1中下载的字体图标文件中fo...
微信小程序里更简洁的使用使用fontawesome
qq_37422024的博客
11-09 964
贴上源帖 原帖子 自己试了试原作者的办法后，是可以使用的，但是复制到开发者工具里之后，直接几百行有点不够舒服，所以想出的这个办法。 按照原作者的方法得到 stylesheet.css 和 font-awesome.css 之后，直接将扩展名改为‘.wxss后，在小程序根目录下新建一个“stylesheets”文件夹，将这两个文件放进来（也可按照自己的习惯放置） 最后在小程序app.wxs...
小程序支持fontawesome网络字体显示
caixiaoxun的专栏
05-16 725
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
微信小程序使用Font Awesome
征途人生&梦
06-23 617
下载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
微信小程序使用iconfont字体图标
LLL_liuhui的博客
01-19 426
1、在阿里巴巴矢量图标库选择你要的图标https://www.iconfont.cn/，加入购物车 2、点击右上角购物车，添加到项目 3、下载至本地 4、解压后，复制iconfont.css到app.wxss 5、使用： <icon class='iconfont icon-renwu'></icon> 6、也可以复制iconfont.css到自己新建的一个样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值