20

I am trying to use bulma icons following the docs here, but the icon doesn't show up:

<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>

Also see the fiddle here, what could be the problem?

Psidom
  • 209,562
  • 33
  • 339
  • 356
  • 3
    `fa fa-home` looks like [font-awesome](http://fontawesome.io/), you need the css and font files. I am unaware if bulma uses that, but it would not surprise me. – Theraot Dec 06 '17 at 19:35
  • 1
    @Theraot You are correct. Make sure you read the blurb about font awesome on the Bulma [getting started](https://bulma.io/documentation/overview/start/) page. – T Porter Dec 06 '17 at 19:37
  • Ahh that's it. After including the font-awesome, it works now. Do you mind add the link to the answer @TPorter so I can accept it? – Psidom Dec 06 '17 at 19:39
  • @TPorter Thanks for the link. What Psidom said, your answer is incomplete. It says in the link you posted that you need to include `font-awesome.min.css` separately. In fact, you can see in file [bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css) that it does not link it nor contain the definitions for the icons. Edit: and thanks to the edit, it is now inaccurate too. – Theraot Dec 06 '17 at 19:41

2 Answers2

30

You also need to include the bulma.min.css file, not just the .map.

Edit

Per the Bulma docs:

If you want to use icons with Bulma, don't forget to include Font Awesome:

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

Update 3/19/2019

As @Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Community
  • 1
  • 1
T Porter
  • 1,162
  • 7
  • 15
2

Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.

note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website. https://fontawesome.com/start

Chandraarnav
  • 77
  • 1
  • 10