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

【问题标题】：Laravel 5.8 Font Awesome showing as a square instead of the iconLaravel 5.8 Font Awesome 显示为正方形而不是图标
【发布时间】：2020-05-09 05:37:22
【问题描述】：

我试图让图标显示在我的项目中，但每当我使用 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"
}

【问题讨论】：

标签： laravel npm sass font-awesome-5

【解决方案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';

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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

【讨论】：