Relative font path in css file

Question

I have a stylesheet referenced in the header:

All CSS works in this, except for this specific code:

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

When I put the above CSS @ font-face on the page above where the icons are displayed, it works, but when I put it in a CSS file, it stops working. I finally found out that this is probably due to the wrong path to the file.

Here is the file structure:

Looking at this article ( https://css-tricks.com/quick-reminder-about-file-paths/ ), I look like this:

url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')

return to the root and then to the font folder. But the icon is still not showing from the CSS file.

What am I doing wrong and how can I fix it?

Answer 1

URL- CSS CSS.

url('fonts/icomoon.eot?hsw0h3'); http://example.com/css/fonts/icomoon.eot?hsw0h3, , http://example.com/fonts/icomoon.eot?hsw0h3.

../ /

Answer 2

../ , (../../path),

Answer 3

Consider the description of font sources separately without any version specification (I think), for example,

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

Alternatively, you can also remove the spec formatand let the browser automatically detect if the problem is still persisting.

Hope this help. :)