Laravel Mix Fontawesome

Question

我使用以下方法安装了Fontawesome 5

npm i --save @fortawesome/fontawesome-free

通过添加以下内容编辑了我的app.scss

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

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

Answer 1

解决方案是在public path中定义laravel mix，因为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在您的webpack.mix.js中添加到您的root folder：

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

5将一些图标添加到刀片文件中，例如。

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

6。运行：

npm run dev