Bulma图标无法显示？

Question

Bulma图标无法显示？

20

我正在尝试按照这里的文档使用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>

另外请查看这里的示例（链接），可能存在什么问题？

- Psidom

3

fa fa-home 看起来像是 Font Awesome 的图标，你需要使用相应的 CSS 和字体文件。我不确定 Bulma 是否使用它，但这也不奇怪。 - Theraot

1

@Theraot 没错。确保你阅读了Bulma 入门页面上关于字体awesome的说明。 - T Porter

啊，就是这样。在包含 font-awesome 后，现在它可以工作了。你介意把答案的链接加到 @TPorter 那里，这样我就可以接受它了吗？ - Psidom

@TPorter 感谢提供链接。就 Psidom 所说，你的回答是不完整的。在你发布的链接中，它说需要单独包含 font-awesome.min.css。实际上，在文件 bulma.min.css 中，你可以看到它没有链接也没有包含图标的定义。编辑：感谢编辑，现在它也不准确了。 - Theraot

2个回答

3

除非您调用fontawesome库，否则Bulma图标将不会显示，我们可以使用kit代码来实现。在您的代码的<head>...</head>部分中，它将类似于<script src="https://kit.fontawesome.com/xxxxxxxx.js"></script>。

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

- Chandraarnav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T Porter · Accepted Answer

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

编辑

根据Bulma文档:

如果要在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>