Question

我在使用字体真棒5和sass时遇到问题我已按照他们网页上的说明开始了但我似乎可以看到图标显示我有一个目录

C：\用户\ MYNAME \了解\公共\ SCSS \厂商\字体真棒\ fontawesome.scss

在我的public \ scss文件夹中我有一个home.scss文件，其中我导入fontawesome.scss如下

@import“vendors / font-awesome / fontawesome.scss”;

当我编译代码时，它显示了fontawesome类和东西，当我在网页上看到没有字体只是大白色方块进一步研究告诉我它没有加载webfonts我把webfonts文件夹放在我的项目在这个目录中< / p>

C：\用户\ MYNAME \了解\公共/网络字体

并在_variables.scss文件中我修改了fa-path指向 “../webfonts”;但这没有任何作用我真的很感激任何有助于我解决这个问题的见解，因为按照在线说明字体真棒5与sass似乎并不适合我。

Answer 1

在主scss文件中：

你的文件夹结构有点不同，但它应该给你一个大概的想法。

//在主scss文件中

    @import "FontAwesome/fontawesome.scss";
    @import "FontAwesome/fa-light.scss";

//在你的字体中有很棒的变量

    $fa-font-path: "../WebFonts" !default;

//文件夹结构

   /stylesheets/mycompiled.css

// Webfont位置

  /stylesheets/WebFonts

可能你没有导入Light / Regular / Solid部分，因为其他一切看起来都很好。

如果仍有问题，您可以指定绝对路径（假设/ public是您的根目录）

 $fa-font-path: "/WebFonts" !default;

使用绝对路径，我的工作为

$fa-font-path: "/stylesheets/WebFonts" !default;

Answer 2

由于不推荐使用某些软件包，我已经编译了我需要做的工作，以使FontAwesome 5 Free与React和Typescript一起工作。

考虑到（@alexsasharegan和@cchamberlain）发布的解决方案，这就是我解决的方法：

我的体系结构：

    React 16.7.0
    Typescript 3.3.1
    Bulma 0.7.2 (similar to bootstrap)
    FontAwesome 5.7.1

1） Package.json （我使用过的FontAwesome软件包。您可以切换到FAR或FAL）

    (...)
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.7.1",
        "@fortawesome/free-solid-svg-icons": "^5.7.1",
    };
   (...)

2）在您的webpack.config中（非常必要）：

    (...)
    {
        test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        use: "url-loader?limit=100000"
    }
    (...)

3）在您的主要scss文件中：

    $fa-font-path : "~@fortawesome/fontawesome-free/webfonts";
    @import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
    @import "./node_modules/@fortawesome/fontawesome-free/scss/solid.scss";

4）这将使您可以像这样使用Font Awesome：

    <i className="fas fa-check" />

及时：如果您想使用FontAwesome作为组件，请查看其文档，该文档很好地解释了如何导入JS文件以使其正常工作。

https://fontawesome.com/how-to-use/on-the-web/using-with/react

希望它会有所帮助，我已经在这里发布了，因为自上次消息以来，某些软件包已更改。

fontawesome 5 with sass

2 个答案: