Semantic UI Icons-font not loading

StackOverflow https://stackoverflow.com/questions/21206491

Question

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?

Was it helpful?

Solution

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

OTHER TIPS

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

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

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';

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top