令人敬畏的字体图标呈现为空心正方形

Question

就像我将font-awesome导入到main.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

@import '~@fortawesome/fontawesome-free/scss/regular'; 

我使用了webpack，并且一切都可能正确构建，但是由于某些原因未呈现图标。

编辑1：

实施后，解决方案图标开始渲染，但仅当我启动webpack-dev-server

时

但是如果我构建dist文件夹，图标仍然无法呈现

控制台中的错误：

我猜我的webpack.config.js原因出了点问题，在构建过程后，我的/fonts中有dist个文件夹

Answer 1

解决方案是您需要将所有这些.scss导入

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CGIP Registration Form</title>
<link href="css/cg_base.css" rel="stylesheet" />
<link href="css/cg_styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/cg_forms.css">
<link rel="stylesheet" href="css/cg_validate.css">
<script src="js/cg_script.js" charset="utf-8"></script>