icoMoon fonts setup, icons not showing up

css icon-fonts
user2371684 picture user2371684 · Sep 9, 2014 · Viewed 18.6k times · Source

I am not able to display my icon fonts. This is the directory structure I have:

_ folder containing css and fonts folders outside of the _ folder I have the demo1.html page

This is the code I am using for setting up the fonts:

@font-face {
    font-family: 'icomoon';
    src:url('_/fonts/icomoon.eot?-9hqo51');
    src:url('_/fonts/icomoon.eot?#iefix-9hqo51') format('embedded-opentype'),
        url('_/fonts/icomoon.woff?-9hqo51') format('woff'),
        url('_/fonts/icomoon.ttf?-9hqo51') format('truetype'),
        url('_/fonts/icomoon.svg?-9hqo51#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

The html code is the following:

<span aria-hidden="true" class="icon-raja_head"></span>

Here is a sample page I set up. The code for the fonts are on line 903 in my stylesheet.

Thanks -Sohail

Answer

olvado picture olvado · Sep 22, 2014

Your src reference is relative so your css delclaration is looking for fonts in a directory called _ within your _ directory. This is why it works form the root directory.

You need either correct the relative path to 'fonts/icomoon.eot?-9hqo51' or make the path absolute by preceding it with / eg: '/_/fonts/icomoon.eot?-9hqo51'

Related questions

How can I rotate a font icon 45 degrees?

I want to rotate this font icon 45 degrees. The icon has this CSS (all CSS compiled via LESS): [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-size: 20px; font-style: normal; margin-left: 20px; } And it's …

Read More
Icon Fonts: How do they work?

I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work? I've tried checking the related icon font resources loaded in Chrome to see how …

Read More
How do I use icons from fontello in my css?

I've been using entypo (downloaded from entypo.com), and displaying the icons like so: .icon:before { display: inline-block; font-family: 'Entypo'; text-decoration: none; speak: none; } .email:before { content: "\2709"; } Pretty standard. But since the hinting is off when you download it from …

Read More