使用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";

Answer 3

如果您使用的是FontAwesome 5和Sass，则只需设置$fa-font-path：

$fa-font-path : 'assets/fortawesome/fontawesome-free/webfonts';

正如@MRP在评论中指出的那样，我没有提到您必须在导入FontAwesome之前将其放置，否则您不会覆盖Sass默认变量。