Semantic UI Icons-font not loading

html css font-awesome semantic-ui
fgblomqvist picture fgblomqvist · Jan 18, 2014 · Viewed 32.3k times · Source

I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.

Here is the HTML:

<h1>Title<i class="lab icon"></i></h1>

I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

But it still doesn't work. What am I missing?

Answer

fgblomqvist picture fgblomqvist · Jan 18, 2014

Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/

Source: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

Related questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
Use Font Awesome icon as CSS content

I want to use a Font Awesome icon as CSS content, i.e., a:before { content: "<i class='fa...'>...</i>"; } I know I cannot use HTML code in content, so is it only images left?

Read More