17

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?

5 Answers 5

23

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

5
  • 2
    Not exactly. Its parallel to your semantic.min.css. Otherwise you can change font folder path via a external stylesheet as well.
    – iMatoria
    Commented Jul 26, 2014 at 4:29
  • Updated the link and the location (they changed), thanks Commented Jan 6, 2015 at 1:13
  • 1
    According to my situation, I have to put theme folder into the css folder. An easy way to detect the path: open website with Chrome, inspect element - Network, find the unloaded font url.
    – Hunger
    Commented Jan 21, 2015 at 6:37
  • 1
    If this isn't an option, are we really meant to find/replace that string? Commented Feb 22, 2015 at 20:05
  • @DitmarWendt Yes, unless you want to create some kind of URL redirect depending on how much control you have over the web server. Commented Feb 23, 2015 at 0:08
13

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>


  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
  
  
</head>

<body>
  <h1>Icon Example</h1>
  <a class="item"><i class="alarm icon"></i>Notifications</a>
  <a class="item"><i class="mail outline icon"></i>Messages</a>

</body>

</html>

you can try taking a look at the above snippet. You may also use the below link for other similar issues:

https://cdnjs.com/libraries/semantic-ui

1
  • Updating your example to the 2.2.13 version shows more icons like the id card one.
    – Stephane
    Commented Aug 27, 2017 at 14:11
4

You don't need to use font-awesome of any other library try cdn first Official icon.min.css

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

somethimes this doesn't work so what you can do is go semantic-ui official page download semantic ui zip folder and extract in component folder you can find icon.min.css

include that file in index.html

    <link rel="stylesheet" href="icon.min.css">

try to display those icon Official docs

<i class="disabled users icon"></i>

ENJOY

0

My solution was pretty simple (once I worked it out). I had edited themes.config to use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.

/* Elements */
:
@flag       : 'supernewtheme';
@header     : 'supernewtheme';
@icon       : 'supernewtheme';
@image      : 'supernewtheme';
@input      : 'supernewtheme';
:

Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my build folder in the correct place, it was.

Changing the theme back to default for @icon did the trick:

@icon       : 'default';
0

if someone is using electron or any other JavaScript framework. This might work for you. Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great. Basic solution I opted is in reference to this official error reporting. Also in my UI icon wasn't appearing for a drop-down so I used console to solve like

.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}

Hope it helps.

Not the answer you're looking for? Browse other questions tagged or ask your own question.