Search code examples
cssicon-fonts

icoMoon fonts setup, icons not showing up

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

Solution

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