icoMoon fonts setup, icons not showing up

Question

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

Strangely, it works if I move the css file outside _ folder and on the same level as the .html file and keep the fonts folder under the _ folder. — user2371684, Sep 09 '14 at 09:37
But I don't want to move my css file to make that to work though — user2371684, Sep 09 '14 at 09:40
I wonder if this is a path issue. This http://gladahundar01.businesscatalyst.com/demo2.html has the css on the same level as the html file and the fonts folder as previously in the _ folder. The sample works on my local machine but but not on the web — user2371684, Sep 09 '14 at 11:57
In the console I am getting File Not Found errors, for the woff, ttf and the svg file, for example: Failed to load resource: the server responded with a status of 404 (ERROR: The file requested could not be found.) http://gladahundar01.businesscatalyst.com/_/css/_/fonts/icomoon.svg?-9hqo51#icomoon The path in the error message for those files doesn't seem to correspond with my path. My loccal path is: _/fonts/icomoon.svg — user2371684, Sep 09 '14 at 12:45

score 6 · Accepted Answer · answered Sep 22 '14 at 14:43

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'

icoMoon fonts setup, icons not showing up

1 Answers1