带有webpac的FontAwesome 5伪元素

Question

我为此苦苦挣扎太久了，不知道我要去哪里错了。

我正在尝试在我的webpack项目中使用fontawesome 5。我已经能够在html中使用图标，但是如果尝试使用伪选择器，它只会返回空的正方形。阅读大量文章和文档，但似乎无济于事。请帮忙谢谢。

npm install @fortawesome/fontawesome-free

index.js

import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all.js'
import '../scss/main.scss'

window.FontAwesomeConfig = {
  searchPseudoElements: true
}

main.scss

/// Bootstrap ///
// -- Required
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// -- Optional
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/mixins/breakpoints";

/// Modules ///
@import 'modules/colors';
@import 'modules/sizes';
@import 'modules/fonts';
@import 'modules/transitions';    

/// Partial Files ///
@import 'partials/jumbotron';

/// Vendor Files ///
@import 'vendor/reset';

SCSS文件_jumbotron.scss

.products {
    background: $colour-red;

    .products-item {
      .products-item-header {
        .products-item-title {
          a {
            padding: $size-base;
            display: block;
            color: $colour-white;
            text-align: center;

            &:before {
              font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
              display: block;
              content: "\f095";
              font-weight: 900;
              font-size: 20px;
              color: $colour-white;
        }
      }
    }
  }

HTML

<div class="products">
    <div class="row">
        <div class="col-sm-3 products-item">
            <div id="post-37">
              <div class="products-item-header entry-header">
                <h3 class="products-item-title entry-title">
                   <a href="http://localhost/wplocal/products/agribusiness">
                      Agribusiness
                    </a>
                </h3>
             </div>
          </div>
       </div>
    </div>
 </div>

Webpack配置

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
// const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    entry: { main: './src/js/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [
            {
              use: {
                loader:'babel-loader',
                options: { presets: ['es2015'] }
              },
              test: /\.js$/,
              exclude: /node_modules/
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
              test: /\.(gif|png|jp(e*)g|svg)$/,
              use: [{
                loader: 'url-loader',
                options: {
                  limit: 1000000, //Convert images < 1mb to base 64 strings
                  name: 'images/[name].[ext]'
                }
              }] 
            },
            {
              test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
              use: [{
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[ext]',
                  publicPath: '../'
                }
              }]
            }
        ]
    },
    devServer: {
        contentBase: "./dist"
    },
    plugins: [
        new HtmlWebPackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.css',
            chunkFilename: 'css/style.css'
        }),
        new CopyWebpackPlugin ([
          {
            from: './src/images',
            to: 'images'
          }
        ]),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          Popper: ['popper.js', 'default']
        })
    ]
}

Answer 1

尝试

  font-family: 'Font Awesome\ 5 Free';

Answer 2

在fontawesome-svg-core配置对象中将searchPseudoElements设置为true。 并验证font-family和content属性是否具有正确的值。

摘自fontawesome文档：

https://fontawesome.com/how-to-use/javascript-api/setup/configuration

通过将searchPseudoElements设置为true（默认情况下为false），您可以 可以让Font Awesome在您的DOM中搜索具有以下内容的任何元素：

Font Awesome匹配的字体家族，

内容属性

有效的字体系列值包括：字体超赞5稳定，字体超赞5常规，字体超赞> 5浅和字体超赞5个品牌。

示例

import {library, dom, config} from "@fortawesome/fontawesome-svg-core";
import {faCheck} from "@fortawesome/free-solid-svg-icons/faCheck";

config.searchPseudoElements = true; //<----- config

export default () => {

    library.add(faCheck);
    dom.watch();

}

示例：

<head>
  <script src="https://use.fontawesome.com/releases/v5.13.1/js/all.js" data-search-pseudo-elements></script>
  <style>
  .glasses::before {
    display: none;
    font-family: 'Font Awesome 5 Solid';
    content: "\f530";
  }
  </style>
</head>
<body>
  <span class="glasses"></span>
</body>

Answer 3

$centerSphere