解决uniapp使用Font Awesome图标无法显示问题

解决uniapp使用Font Awesome图标无法显示问题

前言

在平时的Vue项目中使用Font Awesome图标时很方便，只需要引入即可，但是在小程序里面使用却无法显示，并且提示[渲染层网络层错误]。

• Font Awesome下载 Download Font Awesome Free or Pro | Font Awesome
  

原因

导致报错的原因：小程序无法解析字体文件
在下载的Font Awesome  css文件中使用字体是如下方式导入的：

这种方式，小程序无法识别。
解决方案

fontawesome-free-6.7.2-web\webfonts文件夹下的字体文件

我们只需要将字体文件转换为base64文件即可
打开这个网站：https://transfonter.org/
注意事项：ttf字体文件勾选TTF，woff2字体文件勾选WOFF2

第四步点击后会生成一个压缩包，下载压缩包，将stylesheet.css文件中的src 中的url替换Font Awesome的all.css文件中对应的字体文件引入，具体看图：

替换后应是：

有好几个字体文件都需要一一替换！！！
建议：
base64很长，推荐从stylesheet.css文件复制的时候，只复制url中单引号的内容去all.css替换

1. url('base64.....') format("woff2")
2. url("../webfonts/fa-brands-400.woff2") format("woff2")

复制代码

结尾

记得在App.vue中引入一下css
[code][/code]参考链接

• https://blog.csdn.net/weixin_46858417/article/details/137469883
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

新版吗？好像是停更了吧。

感谢，下载保存了

谢谢分享，试用一下

不错，里面软件多更新就更好了

过来提前占个楼

感谢，下载保存了

谢谢楼主提供！

感谢分享，学习下。

谢谢楼主提供！

谢谢分享，试用一下

不错，里面软件多更新就更好了

yyds。多谢分享

这个有用。

前排留名，哈哈哈

感谢分享，下载保存了，貌似很强大

前排留名，哈哈哈

热心回复！

新版吗？好像是停更了吧。

很好很强大  我过来先占个楼 待编辑