帶有 Webpack 的 Font Awesome 5 偽元素

Question

我已經為此苦苦掙扎了太久，並且不知道我哪里出錯了。

我正在嘗試在我的 webpack 項目中使用 fontawesome 5。 我已經能夠在 HTML 中使用圖標，但是如果我嘗試使用偽選擇器，它只會返回空方塊。 閱讀大量文章和文檔，但似乎沒有任何效果。 請幫忙謝謝。

npm install @fortawesome/fontawesome-free

索引.js

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

    window.FontAwesomeConfig = {
      searchPseudoElements: true
    }

主文件

    /// 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>

網絡包配置

    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

設置searchPseudoElements到true的fontawesome-SVG-核心配置對象。 並驗證 font-family 和 content 屬性是否具有正確的值。

取自 fontawesome 文檔：

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

通過將 searchPseudoElements 設為 true（默認為 false），您可以讓 Font Awesome 在您的 DOM 中搜索具有以下元素的任何元素：

Font Awesome 匹配字體系列，

內容屬性

有效的字體系列值為：Font Awesome 5 Solid、Font Awesome 5 Regular、Font Awesome > 5 Light 和 Font Awesome 5 Brands。

例子

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

<style>
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}