Icons not showing with Semantic UI

css gulp icons font-awesome semantic-ui
Jamgreen picture Jamgreen · Mar 21, 2017 · Viewed 9.7k times · Source

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.

Answer

therewillbecode picture therewillbecode · Jul 14, 2017

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.

Related questions

Stylesheet not loaded because of MIME-type

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes. The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console …

Read More
How to Gulp-Watch Multiple files?

I have something like this: gulp.task('default', ['css', 'browser-sync'] , function() { gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() { gulp.run('css'); }); }); but it does not work, because it watches two directories, the sass and the layouts directory for changes. How …

Read More
CSS minify and rename with gulp

I've a variable like var files = { 'foo.css': 'foo.min.css', 'bar.css': 'bar.min.css', }; What I want the gulp to do for me is to minify the files and then rename for me. But the tasks is currently …

Read More