Font-awesome 5 не работает с веб-пакетом при установке с npm - PullRequest
Новая
       56

Font-awesome 5 не работает с веб-пакетом при установке с npm

0 голосов
/ 25 июня 2019

Я хочу установить Font-awesome с npm, чтобы он работал с webpack и babel.

Я установил font-awesome с npm через 

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

И добавил это кtop of my 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>

Это просто показывает круг с вопросительным знаком

Мой конфиг веб-пакета 

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"]
}

Ps Все работает отлично, просто мои иконки со шрифтами не отображаются должным образом.

1 Ответ

0 голосов
/ 25 июня 2019

Вы используете неверный значок, потому что нет 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

...