Bulma icon not showing up?

Asked 6/12, 2017 at 19:32 Answered 20/8, 2020 at 6:41

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?

Jakoba answered 6/12, 2017 at 19:32 Comment(4)

fa fa-home looks like font-awesome, you need the css and font files. I am unaware if bulma uses that, but it would not surprise me. – Alcoholicity 6/12, 2017 at 19:35

@Alcoholicity You are correct. Make sure you read the blurb about font awesome on the Bulma getting started page. – Schiro 6/12, 2017 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? – Jakoba 6/12, 2017 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 that it does not link it nor contain the definitions for the icons. Edit: and thanks to the edit, it is now inaccurate too. – Alcoholicity 6/12, 2017 at 19:41

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>

Schiro answered 6/12, 2017 at 19:34 Comment(1)

Above solution did not work for me, but based on Bulma Docs, I added <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> and it is working now!!! – Parfitt 17/3, 2019 at 17:10

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

Homes answered 20/8, 2020 at 6:41 Comment(0)

Recommended topics

Hot tags