Question

我是使用Sass的新手，我正在尝试在我的项目中实现它。我用npm导入了font-awesome并且有我想要导入字体的主要style.scss文件。我读了很多关于Sass入门的文档。我有：

1。）将font-awesome目录复制到我的项目中。

2.。）打开'font-awesome / scss / _variables.scss'并编辑$ fa-font-path变量以指向我的字体目录。

$fa-font-path:        "project/node_modules/font-awesome/fonts" !default;

3.）我将font-awesome.scss文件导入到我的main style.scss文件中，并试图实现图标的使用，但图标最终呈现为空白方块。

//How I Import At The Top Of My Page
@import "project/node_modules/font-awesome/scss/font-awesome";



//How I Try To Implement
p:first-child:before{
    content: $fa-var-mobile-phone
}

从我所看到的，似乎我有某种映射问题，但一切对我来说都是正确的。对于解决这个问题，我将不胜感激。谢谢

Answer 1

从我提供的信息中我可以看出来。您需要设置font-family，它应该是文件而不仅仅是路径。

p:first-child:before{
    content: $fa-var-mobile-phone;
    font-family: 'Your font-awesome';
}

Answer 2

我遇到了同样的问题，解决方法是遵循official docs。

在我们的style.scss（或其他情况下为app.scss）中添加以下内容：

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

将字体路径添加到您的_variables.scss：

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

请注意，我正在使用npm进行程序包管理，并使用以下命令安装了fontawesome：

npm i @fortawesome/fontawesome-free

萨斯：字体 - 令人敬畏的显示广场而不是图标

2 个答案: