Laravel 5.8字体显示为正方形而不是图标

我试图让图标显示在我的项目，但每当我使用的字体真棒它显示为一个正方形

我正在使用npm数据包管理

这是我的app.scss文件中的内容：

// Variables
@import 'variables';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

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

在_variables.scss文件中，我有以下内容：

// Font Awesome
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

这是package.json文件中的内容：

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "axios": "^0.19",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "material-design-iconic-font": "^2.2.0",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "sweetalert": "^2.1.2",
    "vue-template-compiler": "^2.6.11"
}

---

可能有很多事情。顶级竞争者（过去曾阻止过我）是：

1） 确保没有使用某种通配符覆盖页面上的

字体系列

，例如：

*{font-family://etc

2） 容易出错-请记住，Font Awesome 5贬低了

fa

语法，转而使用

fas

或

fab

。这一次让我达到了只使用V4的地步，因为我们所有的项目都需要重构

3） 三次检查FA文件的路径是否正确，以及它是否在站点内正确翻译（即从服务器到正确的文件夹）

4） 我不熟悉进口产品的tilda。这通常适用于我：

npm i --save @fortawesome/fontawesome-free

然后在您的scss文件中：

// Variables
@import 'variables';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

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

---

可能有很多原因。最有竞争力的（过去曾阻止过我的）是：

1） 确保没有使用某种通配符覆盖页面上的

字体系列

，例如：

*{font-family://etc

2） 容易出错-请记住，Font Awesome 5贬低了

fa

语法，转而使用

fas

或

fab

。这一次让我达到了只使用V4的地步，因为我们所有的项目都需要重构

3） 三次检查FA文件的路径是否正确，以及它是否在站点内正确翻译（即从服务器到正确的文件夹）

4） 我不熟悉进口产品的tilda。这通常适用于我：

npm i --save @fortawesome/fontawesome-free

然后在您的scss文件中：

// Variables
@import 'variables';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

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

---

我已通过在webpack.mix.js中添加以下内容解决了此问题

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

---

我已通过在webpack.mix.js中添加以下内容解决了此问题

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

---

对我来说，同样的问题是，因为我无意中添加了这个代码

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';

---

对于

app.css

而不是

app.scss

，对于我来说，同样的问题是，因为我无意中添加了此代码

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';

改为

app.css

而不是

app.scss