我想在npm上安装Font-awesome,以便它可以与webpack和babel一起使用。
我通过npm通过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。一切正常,只是我的超赞字体图标无法正确显示。
答案 0 :(得分:0)
您使用的是无效图标,因为没有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