时间戳

首页 > 解决方案 > 带有 Webpack 的 Font Awesome 5 伪元素

javascript - 带有 Webpack 的 Font Awesome 5 伪元素

问题描述

我一直在努力解决这个问题太久了，不知道我哪里出错了。

我正在尝试在我的 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
    }

主文件

    /// 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']
            })
        ]
    }

标签： javascriptcsswebpackfont-awesomefont-awesome-5

解决方案

尝试

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

推荐阅读