Laravel Mix Fontawesome
Я установил 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) он отображается как квадрат. Есть ли у вас какие-либо идеи? Спасибо.
Извините за задержку с ответом. Я не нашел исправления. Я просто захожу на сайт с помощью php artisan serve. Прямой доступ к общей папке laravel не работает. Трюк с Vhosts тоже работает. Кроме того, php -S 127.0.0.1:8080 -t public работает, если вы не хотите использовать php artisan. Вы можете изменить адрес на свой IP. И это здорово, потому что другие компьютеры на локальном хосте могут подключаться.
Отвечает ли это на ваш вопрос? Laravel 5.7 + Font Awesome
Ответы 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
Как импортировать только конкретную иконку? Этот метод импорта приводит к большим исходным файлам.
Вместо @import '~@fortawesome/fontawesome-free/css/all.css'; импортируйте определенный шрифт. Загляните в свою папку node_modules/fortawesome.
Привет, ты нашел решение? Это происходит и со мной, я понимаю, что файлы шрифтов webfa подключены к корневому пути localhost, что вызывает ошибку 404, но не могу ее исправить.