解决uniapp使用Font Awesome图标无法显示问题
<h1 id="解决uniapp使用font-awesome图标无法显示问题">解决<code>uniapp</code>使用<code>Font Awesome</code>图标无法显示问题</h1><h1 id="前言">前言</h1>
<p>在平时的<code>Vue</code>项目中使用<code>Font Awesome</code>图标时很方便，只需要引入即可，但是在小程序里面使用却无法显示，并且提示<font color="red">[渲染层网络层错误]</font>。</p>
<ul>
<li>Font Awesome下载 Download Font Awesome Free or Pro | Font Awesome</li>
</ul>
<h1 id="原因">原因</h1>
<p>导致报错的原因：小程序无法解析字体文件</p>
<p>在下载的<code>Font Awesome </code> <code>css</code>文件中使用字体是如下方式导入的：</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202503/3091176-20250306211613220-43034056.png" alt="image" loading="lazy"></p>
<p>这种方式，小程序无法识别。</p>
<h1 id="解决方案">解决方案</h1>
<p><code>fontawesome-free-6.7.2-web\webfonts</code>文件夹下的字体文件</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202503/3091176-20250306211617722-1285154337.png" alt="image" loading="lazy"></p>
<p>我们只需要将字体文件转换为<code>base64</code>文件即可</p>
<p>打开这个网站：https://transfonter.org/ </p>
<p><font color="red">注意事项：ttf字体文件勾选TTF，woff2字体文件勾选WOFF2</font></p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202503/3091176-20250306211623250-51433037.png" alt="image" loading="lazy"></p>
<p>第四步点击后会生成一个压缩包，下载压缩包，将<code>stylesheet.css</code>文件中的<code>src</code> 中的<code>url</code>替换<code>Font Awesome</code>的all.css文件中对应的字体文件引入，具体看图：</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202503/3091176-20250306211627849-2002986252.png" alt="image" loading="lazy"></p>
<p>替换后应是：</p>
<p><img src="https://img2024.cnblogs.com/blog/3091176/202503/3091176-20250306211633291-10616287.png" alt="image" loading="lazy"></p>
<p><strong>有好几个字体文件都需要一一替换！！！</strong></p>
<p>建议：</p>
<p><code>base64</code>很长，推荐从<code>stylesheet.css</code>文件复制的时候，只复制<code>url</code>中单引号的内容去<code>all.css</code>替换</p>
<pre><code class="language-css">url('base64.....') format("woff2")
url("../webfonts/fa-brands-400.woff2") format("woff2")
</code></pre>
<h1 id="结尾">结尾</h1>
<p>记得在<code>App.vue</code>中引入一下<code>css</code></p>
<pre><code class="language-vue"><style>
/* 导入字体图标 替换成你的自己路径 */
@import '/src/static/css/all.css';
</style>
</code></pre>
<p><em><font size="2">参考链接</font></em></p>
<ul>
<li><em><font size="2">https://blog.csdn.net/weixin_46858417/article/details/137469883</font></em></li>
</ul><br><br>
来源：https://www.cnblogs.com/ZYPLJ/p/18756492
頁:
[1]