如何正确导入 font-awesome scss

Question

I am trying to use an icon from font-awesome with webpack 4 via scss.
The webconfig file looks as following:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "style.css"
            }
          },
          { loader: "extract-loader" },
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer({ grid: false })]
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name][hash].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new CopyWebpackPlugin([
      {
        from: "public"
      }
    ])
  ]
};

I imported the scss as following:

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";  

and use:

    <a class="mdc-list-item mdc-list-item--selected demo-drawer-list-item" href="#">
        <i class="fas fa-inbox mdc-list-item__graphic"></i>Inbox
    </a>  

It shows:

a rectangle instead an icon. What am I doing wrong? The fully example is on github .

Answer 1

我遇到了同样的问题，将 font-awesome scss 导入到我的项目中，这对我有用。

@import "~@fortawesome/fontawesome-free/scss/fontawesome"; 

Answer 2

For anyone else running into an issue with the fonts not loading (eg showing the empty square glyph) despite Webpack (4) compiling and file-loader copying the fonts properly, I found an option that makes everything load as expected.

First the recommended SCSS imports with ~ node_modules path as seen in other posts:

$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
@import '~@fortawesome/fontawesome-pro/scss/light';

Then you'll have the file-loader config targeting font files (above). To the file-loader options you want to add the esModule: false option . Note that this could mess with other fonts you may be importing outside of SCSS.

Basically what I discovered is the fonts would get copied, but the font file urls in the compiled CSS would show as src: url([object Module]); . By default file-loader turns the imported file into a module for convenience, but of course we don't need that for fonts here, so adding the option above fixes that.

Answer 3

to get font-awesome for Laravel project the next worked for me:

1. first i had searched 'fa-fw' in public/css. assured it is absent.
2. npm install --save @fortawesome/fontawesome-free - that downloaded and created files to node_modules.
3. add to resources/sass/app.scss

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

4. add to resources/sass/_variables.scss (not sure for this)

$fa-font-path:        "../webfonts";

5. build. npm run dev
6. fa now in you app.css. enjoy!