当我将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中更改字体文件的路径吗?
答案 0 :(得分:6)
是的,你可以改变,
查找字体路径并编辑所有字体类型。
@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默认变量。