Laravel Mix Fontawesome

Question

我安装了Fontawese5

npm i --save @fortawesome/fontawesome-free

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

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

使用Laravel 5.7。当我使用php (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">

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

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

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

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

1. 运行：

npm run dev