[微信小程序]在微信小程序中使用fontawesome6

在微信小程序中使用fontawesome6

一、下载fontawesome6

https://fontawesome.com/download

我这边选择的是Free for web 版本

二、使用transfonter编码成Base64

(1)首先先把刚刚下载的fontawesome6解压，得到如下文件目录。

fontawesome6目录结构

打开webfonts文件夹

fontawesome6/webfonts

把需要的字体上传（点击“Add fonts”按钮）到transfonter，打开Base64 encode

transfonter

点击Convert，等待一会儿，再点击download即可

convert

将刚刚下载的文件解压，得到如下文件目录

文件解压

三、在微信小程序中设置

将上一步解压的文件中的stylesheet.css ,后缀改为wxss

后缀改为wxss

在微信小程序项目的根目录中新建style文件夹，并将刚刚改名的stylesheet.wxss复制进去，并在style文件夹中创建一个新的文件叫font-awesome.wxss

style文件夹

回到最开始下载解压完成的fontawesome6文件夹中，打开css目录，找到fontawesome.css并打开，将文件内所有内容复制到font-awesome.wxss中

fontawesome.css

在font-awesome.wxss中删除以下部分。

需要删除的部分

然后再打开fontawesome6/css文件夹，找到你编码对应字体的css文件，将其中内容复制到font-awesome.wxss中去，我用了far和fas，如果你用的也是这俩，可以直接复制下面的进去

.fas,
.fa-solid {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.far,
.fa-regular {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
}

在小程序项目根目录下配置app.wxss，引入我们刚刚弄好的wxss文件

@import './style/font-awesome.wxss';
@import './style/stylesheet.wxss';

四、使用

<text class="far fa-circle-question"></text>

五、后记

逛了一波度娘，发现很少有关于微信小程序中引入fontawesome的完全教程，于是就记录下每一步怎么操作的，希望对你有所帮助。