Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bulma icon not showing up?

Tags:

html

css

bulma

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?

like image 279
Psidom Avatar asked Dec 06 '17 19:12

Psidom


People also ask

Why are Font Awesome icons not showing?

Are you using Font Awesome Free or Pro? - Some icons are only available in Font Awesome Pro. Double-check that the icon you want is in the version of Font Awesome you're referencing and using. Also, make sure you are using and referencing the right style prefix and supporting files to use Pro icons.

Why does my website icon not show up?

Your browser has cached your site as one without a favicon When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.

How do I show Font Awesome icons?

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). icon If you change the font-size of the icon's container, the icon gets bigger.

How do I display Font Awesome icons in HTML?

You place Font Awesome icons by using the prefix fa and the icon's name.


1 Answers

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>
like image 157
T Porter Avatar answered Oct 03 '22 01:10

T Porter