Search code examples
htmlcssbulma

Bulma icon not showing up?

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?

Solution

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