Laravel 5.8 Font Awesome 显示为正方形而不是图标

Question

我试图让图标显示出来，但是在我的项目中，每当我使用 Font Awesome 时，它都显示为正方形。

我正在使用 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';

在 _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"
}

Answer 1

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

1) 确保您没有使用某种通配符覆盖页面上的 font-family，例如：

* { font-family: // etc

2) 容易犯的错误 - 请记住，Font Awesome 5 已经贬低了 fa 语法并移至 fas 或 fab。这让我到了我只使用 V4 的地步，因为我们所有的项目都需要重构。

3) 再次检查您的 FA 文件路径是否正确以及它是否在您的站点内正确翻译（IE 到服务器的正确文件夹）

4) 我不熟悉导入的 tilda。这通常对我有用：

npm i --save @fortawesome/fontawesome-free

然后在你的 scss 文件中：

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

Answer 2

我已通过在 webpack.mix.js

中添加以下内容来解决此问题

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

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

Answer 3

对我来说也是同样的问题，因为我不小心添加了这段代码

@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

Laravel 5.8 Font Awesome 显示为正方形而不是图标

Laravel 5.8 Font Awesome showing as a square instead of the icon

sass

npm

laravel

font-awesome-5