fontawesome 5 sass

Question

我在使用 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 以指向 “../网络字体”；但这没有任何效果我真的很感激任何能帮助我解决这个问题的见解，因为按照网上的 font awesome 5 with sass 的说明似乎对我不起作用。

Answer 1

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

// 在你的主 scss 文件中

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

// 在你的字体中 awesome 变量

    $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;

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 sass

fontawesome 5 with sass

css

fonts

sass

font-awesome-5