使用Font Awesome时更改字体路径

Question

当我的CSS文件和同一文件夹中的字体文件时,它工作.

但是当我把我的字体文件放在一个文件夹旁边时,我无法得到我的图标.

这是我的CSS代码..

 @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";
        }

我的文件夹结构......

CSS文件

Content/themes/common.css

字体文件

Content/themes/fonts/

我可以在CSS中更改字体文件的路径吗？

Answer 1

是的,你可以改变,

1. 打开你的fontawasome css文件.

2. 查找字体路径并编辑所有字体类型.

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

Answer 2

您可以使用SASS覆盖默认路径

/* path must be relative from the location of the compiled CSS file;
   assuming you have copied the `webfonts directory into `assets` folder*/
$fa-font-path: "./assets/webfonts";

/* Importing FontAwesome SCSS from node modules*/
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";