Change the font path when using Font Awesome

Question

It works when I have my CSS file and the font files in the same folder.

But when I put my font files in side a folder, I can't get my icons.

Here is my CSS code..

 @font-face {
        font-family: FontAwesome;
        src: url(fontfile-webfont.eot?v=4.0.3);
        src: url(fontfile-webfont.eot?#iefix&v=4.0.3) format('embedded-opentype')
        ,url(fontfile-webfont.woff?v=4.0.3) format('woff')
        ,url(fontfile-webfont.ttf?v=4.0.3) format('truetype')
        ,url(fontfile-webfont.svg?v=4.0.3#fontawesomeregular) format('svg');
        font-weight: 400;
        font-style: normal;
    }

    .att {
        display: inline-block;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
        .att-renren:before {
            content: "\f18b";
        }

And my folder structure...

CSS file

Content/themes/common.css

Font files

Content/themes/fonts/

Can I change the path of the font files in CSS??

Answer 1

Yes you can change,

1. Open your fontawasome css file.

2. Find fontface path and edit for all fonts types.

   @font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont.eot?v=4.0.3)