Laravel 混合字体答案

【问题标题】：Laravel Mix FontawesomeLaravel 混合字体
【发布时间】：2018-12-18 06:01:49
【问题描述】：

我安装了 Fontawesome 5 使用

npm i --save @fortawesome/fontawesome-free

通过添加编辑我的 app.scss：

@import '~@fortawesome/fontawesome-free/css/all.css';

使用 Laravel 5.7。当我使用 php artisan serve (http://127.0.0.1:8000/) 访问时，这些图标有效，但是当通过 xampp (localhost/project/public) 直接访问时，它显示为正方形。你有什么主意吗？谢谢。

【问题讨论】：

您好，您找到解决方案了吗？这也发生在我身上，我意识到 webfa 字体文件已安装到 localhost 根路径导致 404 错误，但无法修复它
抱歉回复晚了。我还没有找到解决办法。我只是使用 php artisan serve 访问该站点。无法直接访问 laravel 公用文件夹。虚拟主机技巧也有效。此外， php -S 127.0.0.1:8080 -t public 如果您不希望 php artisan 服务，则可以使用。您可以将地址更改为您的IP。而且这很棒，因为 localhost 中的其他计算机可以连接。
这能回答你的问题吗？ Laravel 5.7 + Font Awesome

标签： laravel-5 font-awesome-5

【解决方案1】：

解决方案是在laravel mix 中定义您的public path，因为xampp 使用另一个根路径然后php artisan serve。

http://localhost/myproject/public/index.php     //xampp
http://127.0.0.1:8000/index.php                 //serve

1 安装fontawesome：

npm i @fortawesome/fontawesome-free

2 添加到您的/resources/sass/app.scss:

$fa-font-path:  "webfonts/" !default;
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

3 添加到您的header：

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

4 在您的root folder 中添加到您的webpack.mix.js：

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

5 在刀片文件中添加一些图标，f.E.

<i class="fas fa-user"></i>

6。运行：

npm run dev

【讨论】：

如何只导入特定图标？这种导入方法会产生很大的源文件。
而不是@import '~@fortawesome/fontawesome-free/css/all.css';，导入特定字体。查看您的node_modules/fortawesome 文件夹。