使用 npm 安装时，Font-awesome 5 不适用于 webpack

Question

我想用 npm 安装 Font-awesome 以便它可以与 webpack 和 babel 一起工作。

我通过

使用 npm 安装了 font-awesome

npm install --save-dev @fortawesome/fontawesome-free

并将其添加到我的 index.js

的顶部

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

当我尝试向 html 添加图标时，例如

<i class="fas fa-like"></i>

它只是显示一个带有 question mark

的圆圈

我的 webpack 配置

const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  mode: 'development',
  target: 'web',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            //options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            plugins: function () { // post css plugins, can be exported to postcss.config.js
              return [
                require('precss'),
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/html/index.html',
      filename: './index.html',
      excludeChunks: ['server']
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

我的.babelrc

{
  "presets" : ["@babel/preset-env"]
}

P.s。一切正常，只是我的超赞字体图标显示不正确。

Answer 1

您使用的图标无效，因为没有 fa-like，您可能正在寻找 fa-thumbs-up：

<script  src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<i class="fas fa-like"></i>

<i class="fas fa-thumbs-up"></i>

您可以在此处轻松搜索图标：https://fontawesome.com/icons?d=gallery&q=like

使用 npm 安装时，Font-awesome 5 不适用于 webpack

Font-awesome 5 doesn't work with webpack when installing with npm

css

npm

fonts

font-awesome

font-awesome-5