2

我在使用 font awesome 5 和 sass 时遇到问题 我已按照他们网页上的说明开始使用，但我似乎可以让图标出现我有一个目录

C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss

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

@import "vendors/font-awesome/fontawesome.scss";

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

C:\Users\myName\Learn\public/webfonts

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

4

2 回答 2

8

您的文件夹结构有点不同，但它应该给您一个大致的概念。

// 在你的主 scss 文件中

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

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

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

// 文件夹结构

   /stylesheets/mycompiled.css

// 网页字体位置

  /stylesheets/WebFonts

您可能没有导入 Light/Regular/Solid 零件，因为其他一切似乎都很好。

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

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

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

$fa-font-path: "/stylesheets/WebFonts" !default;
于 2018-02-07T20:51:54.273 回答
3

由于现在不推荐使用某些软件包，我已经编译了我需要做的事情，以使 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

希望它有所帮助，我已经在这里发布了，因为自上次消息以来，一些包发生了变化。

于 2019-02-05T16:56:02.453 回答