Icons not showing with Semantic UI

S

12

21

I am building Semantic UI with Gulp using this guide

However, the problem is now that the icons are not showing. So if I use <i class="facebook icon"></i>, nothing shows up.

I guess I haven't built the icon font or something like that.

Is it necessary to load Font Awesome or something like that myself? I have read through the Semantic UI documentation, but I cannot find anywhere stating that I have to do anything to enable icons.

Syncarpous answered 21/3, 2017 at 9:37 Comment(3)

have you loaded the semantic.css file? – Stertor 21/3, 2017 at 9:50

Yes I have and everything else in Semantic UI works except for the icons – Syncarpous 21/3, 2017 at 10:20

Also, make sure you haven't got a font-family override on. That got me and was super annoying ! :-( It tries to render the icons in that font-family, which won't work. – Bathyal 15/8, 2019 at 14:25

U

8

You need to include the font assets which are located in themes/default/assets/fonts/

The themes folder must be in the same directory as your semantic.css file.

The fonts are imported externally from the semantic.css file from within the themes directory.

To obtain this directory, download the zip for semantic ui and look inside the dist folder.

Unprejudiced answered 14/7, 2017 at 19:30 Comment(1)

still cant get what do you mean at the first step, i did a peak to assets/semantic-ui/components/icon.css and find out that src: url("./../themes/default/assets/fonts/icons.eot"); is correctly included yet i find this hard to understand – Interpellant 20/10, 2017 at 1:36

B

6

I was having the same issue, use this link tag in the head of your html and you're good to go :

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

Got this from their official website.

Berne answered 26/4, 2020 at 20:42 Comment(1)

Is there a solution without using a CDN? I need to use this library without using CDNs. – Confederacy 2/3, 2021 at 16:1

A

4

Since it's not marked as ansered yet in 2019... Here's the clear answer. The above answers are correct as well, just not straight forward.

So basically what you missed out is the inclusion of the icons themselves. When you download semantic-ui it comes with themes folder within the "dist" folder. what you must do is copy that themes folder and paste it in your project folder where your semantic-ui.css is located. and it will work.

Please remember to mark the question as answered.

Archaeozoic answered 18/3, 2019 at 0:3 Comment(1)

Bro, you saved me, big time. Took me four hours to figure out this issue, thanks to you! If you were signed up as a BAT creator, I would send you a tip. – Confederacy 2/3, 2021 at 16:8

B

4

I had an CORS-issue (causing square empty icons) with the Semantic UI Icons when loading the minified CSS from a CDN. Turns out that it was my location override that caused it, turning it off made the icons display properly.

Bounce answered 5/6, 2020 at 7:41 Comment(1)

I had similar issue. Thanks 😊 – Aluminiferous 30/8, 2020 at 11:23

O

2

I fixed the problem replacing this line

<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">

with this

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">

I also had to add link to icon.min.css

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">

I wrote a post about it on medium :)

Obumbrate answered 29/11, 2020 at 20:31 Comment(0)

C

2

In my case I forgot to import the semantic ui css file. Import it in the App.js ( as it is the top level file ) or anywhere inside your project.

import 'semantic-ui-css/semantic.min.css'

Callas answered 19/12, 2020 at 5:53 Comment(0)

M

1

I had the same problem and I solve it adding the following lines on my webpack.mix.js

  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')

and then executing the command

npm run dev

This add in my case the missing files I need

Malan answered 18/9, 2019 at 10:56 Comment(0)

B

1

In the semantic.css file, you'll find this line:

background: url("./themes/.....")

so, what you have to do is to copy the themes folder with all its contents beside your semantic.min.css

All simply copy the folder Semantic-UI-CSS-master with all its contents to your public/static/wwww folder, and will get things working smoothly.

Bolling answered 22/10, 2020 at 20:22 Comment(1)

Thank you for sharing "public/static/wwww" you saved my day. :) – Lannielanning 28/3, 2022 at 7:47

V

0

I partially fixed this by downloading icon.min.css from this link and then replacing the CDN link with this two lines:

    <link rel="stylesheet" href="~/Content/icon.min.css" />
    <link rel="stylesheet" href="~/Content/semantic.min.css"/>

There are still some icons missing: all the outlined ones. You could also try the fonts folder from this branch but it did not work for me.

Vortumnus answered 23/10, 2019 at 14:13 Comment(0)

B

0

So as the other answers have provided you can change the script to look like:

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

Stop the server and close your browser. If you do not fully close the browser the error will persist. Restart your server.

If this does not resolve your issue, you can also choose to install the CSS library locally via

npm install semantic-ui-css

Then, import the library into your root index.js component,

import "semantic-ui-css/semantic.min.css";

Brooch answered 1/1, 2021 at 6:11 Comment(0)

U

0

None of the above worked for me. However i figured out the issue was in my local index.css file. I was using custom fonts from fontsource.

body,
* {
  font-family: "Rubik Variable", sans-serif !important;
}

This was overriding the sementic ui fontawsome fonts font family. Font awsome using tag to display the icons, we can ignore it from css * selector.

Fix:

body,
*:not(i) {
  font-family: "Rubik Variable", sans-serif !important;
}

Semantic includes a complete port of Font Awesome 5.0.8 designed by the FontAwesome for its standard icon set. Semantic Ui Icons

Urata answered 29/2 at 22:51 Comment(0)

P

-1

I was having the same problems using react tried everything mentioned and nothing worked then just replaced this link
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />

hope that helps

Prudence answered 30/9, 2019 at 14:20 Comment(0)

Recommended topics

Hot tags