Font Awesome 5 图标在 Flask 应用程序中显示为正方形答案

【问题标题】：Font Awesome 5 Icons showing up as square in Flask appFont Awesome 5 图标在 Flask 应用程序中显示为正方形
【发布时间】：2020-08-17 22:02:53
【问题描述】：

我想在我的烧瓶应用程序中使用 Font Awesome 5，但模板只显示空方块或其他图标，然后我希望它们显示/不显示任何内容。

我下载了 fontawesome5 并将它放在静态文件夹中。与

<link rel='stylesheet' href="{{ url_for('static', filename='font-awesome5/css/fontawesome.min.css')}}">

我链接到 css 文件。

使用时

<i class="fab fa-bell"></i>

webapp 显示：

我使用 fa 或 fab 或 fas 都没有关系。

Font Awesome 4 没有问题。

我错过了什么？

编辑：

字体粗细 400、600 和 900 不起作用。

我可以访问 font-awesome.min.css 并且有一个带有代码 f0f3 的 fa-bell，所以导入应该没问题？我必须在我的烧瓶应用程序中的某个地方设置字体系列吗？

【问题讨论】：

你可能需要为他们设置font-weight（我相信font-weight: 400;是诀窍）
我现在设置了字体粗细，但它仍然是一个正方形。
你也试过font-weight: 600;吗？很久以前，我在我的一个项目中使用字体粗细解决了这个问题，但要 100% 确定没有其他东西可以覆盖它。如果不是那个或font-size 出于某种原因，那么很可能是导入问题
对我来说，我使用 "all.min.css" 文件和类 "far fa-bell" 用于常规，"fas fa-bell" 用于固体
'all.min.css' 和 'far' 不幸的是也不适合我

标签： html flask font-awesome font-awesome-5

【解决方案1】：

我找到的解决方案是在header中使用FontAwesome的JavaScript，然后使用“fas fa-*”类。

您可以从官方页面下载我使用的文件：
https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

我放在标题中的代码：

<script src="{{ url_for('static', filename='your_route/fontawesome/js/fontawesome.js')}}"></script>

<script src="{{ url_for('static', filename='your_route/fontawesome/js/solid.js')}}"></script

【讨论】：

【解决方案2】：

你确定你有字体很棒的付费工具包吗？因为贝尔是专业图标。

https://fontawesome.com/icons?d=gallery 你可以在这个链接上查看。

基本用途： https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

你的代码也应该是：

<i class="fab fa-bell"></i>

不是：

<i>class="fab fa-bell"></i>

【讨论】：

link 如果我不理解错误，可以免费使用纯色的铃铛图标吗？并为 表示遗憾，对其进行了编辑，但不起作用。

【解决方案3】：

fab 用于品牌图标。您应该将其替换为 fas - 实心图标

<i class="fas fa-bell"></i>

【讨论】：