布尔玛图标不显示？答案

【问题标题】：Bulma icon not showing up?布尔玛图标不显示？
【发布时间】：2017-12-06 19:32:37
【问题描述】：

我正在尝试使用文档 here 之后的 bulma 图标，但图标没有显示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
 
 <div>
  <span class="icon">
    <i class="fa fa-home"></i>
  </span>
  <span>ICON</span>
 </div>

另见小提琴here，可能是什么问题？

【问题讨论】：

fa fa-home 看起来像font-awesome，你需要css和字体文件。我不知道 bulma 是否使用它，但这不会让我感到惊讶。
@Theraot 你是对的。确保您阅读了 Bulma getting started 页面上关于字体真棒的宣传。
啊，就是这样。在包含了很棒的字体之后，它现在可以工作了。您介意将答案添加到@TPorter 的链接以便我接受吗？
@TPorter 感谢您的链接。 Psidom所说的，您的答案不完整。它在您发布的链接中说您需要单独包含font-awesome.min.css。事实上，您可以在文件bulma.min.css 中看到它没有链接它，也没有包含图标的定义。编辑：多亏了编辑，它现在也不准确了。

标签： html css bulma

【解决方案1】：

您还需要包含bulma.min.css 文件，而不仅仅是.map。

编辑

根据Bulma docs：

如果您想在 Bulma 中使用图标，请不要忘记包含 Font Awesome：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2019 年 3 月 19 日更新

正如@Akshay 在下面指出的那样，文档已更改，现在包含 Font Awesome 的正确方法是

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

【讨论】：

上述解决方案对我不起作用，但基于 Bulma Docs，我添加了<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>，它现在正在工作！！！

【解决方案2】：

除非您调用 fontawesome 库，否则 Bulma 图标不会显示，我们可以为此使用工具包代码。这在代码的<head>...</head> 部分中看起来像<script src="https://kit.fontawesome.com/xxxxxxxx.js"></script>。

注意：您可以从网站获取代码“xxxxxxxx”免费使用 fontawesome 图标。 https://fontawesome.com/start

【讨论】：