使用Font Awesome时更改字体路径

时间:2014-05-28 13:22:03

标签: css font-awesome

当我将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中更改字体文件的路径吗?

3 个答案:

答案 0 :(得分:6)

是的,你可以改变,

  1. 打开您的fontawasome css文件。
  2. 查找字体路径并编辑所有字体类型。

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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

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