https://fontawesome.com/download
我这边选择的是Free for web 版本
(1)首先先把刚刚下载的fontawesome6解压,得到如下文件目录。
打开webfonts文件夹
把需要的字体上传(点击“Add fonts”按钮)到transfonter,打开Base64 encode
点击Convert,等待一会儿,再点击download即可
将刚刚下载的文件解压,得到如下文件目录
将上一步解压的文件中的stylesheet.css ,后缀改为wxss
在微信小程序项目的根目录中新建style文件夹,并将刚刚改名的stylesheet.wxss复制进去,并在style文件夹中创建一个新的文件叫font-awesome.wxss
回到最开始下载解压完成的fontawesome6文件夹中,打开css目录,找到fontawesome.css并打开,将文件内所有内容复制到font-awesome.wxss中
在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的完全教程,于是就记录下每一步怎么操作的,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。