Laravel 5.7 + Font Awesome
Я пытаюсь включить набор инструментов Font Awesome в Laravel 5.7.
Вот шаги, которые я предпринял:
1) Запускаем npm install --save-dev @fortawesome/fontawesome-free
2) Проверьте папки в node_modules/, и все в порядке.
$fa-font-path: "../webfonts";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
3) Потом побежал ...
npm run development -- --watch
4) Я вижу файлы в public/fonts/vendor/@fortawesome/fontawesome-free/.
Однако, когда я захожу в браузер, значки выглядят так:
Ответы 2
Laravel с 5.7 по 7.x с использованием Font Awesome 5 (The Right Way)
Создайте свою конфигурацию webpack.mix.js.
mix.setResourceRoot('../');
mix.setPublicPath('public')
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Установите последнюю бесплатную версию Font Awesome через диспетчер пакетов, например npm.
npm install @fortawesome/fontawesome-free --save-dev
Эта запись зависимости теперь должна быть в вашем package.json.
// Font Awesome
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
В вашем основном файле SCSS /resources/sass/app.scss импортирует один или несколько стилей.
// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
Скомпилируйте свои активы и создайте минифицированную, готовую к производству сборку.
npm run production
Наконец, укажите ссылку на сгенерированный файл CSS в шаблоне / макете Blade.
<link type = "text/css" rel = "stylesheet" href = "{{ mix('css/app.css') }}">
Привет, дружище! Спасибо за ответ. Я сделал это, но: ERROR Не удалось скомпилировать с 15 ошибками13: 30: 59 Эти относительные модули не были найдены: * ./@fortawesome//fa-brands-400.eot в ./node_modules/css-loader??ref- -5-2! ./ node_modules / postcss-l oader / lib ?? postcss! . / node_modules / resolv e-url-loader ?? ref - 5 -4! ./ node_modules / sa ss -loader / lib / loader .js ?? ref - 5-5! ./ reso urces / sass / app.scss ... и т.д .... и .... ОШИБКА в ./resources/sass/ app.scss Ошибка сборки модуля: ModuleNotFoundError: Модуль не найден: Ошибка: не удается разрешить './@fortawesome//fa-brands-400.eot' в \ resources \ sass '... и т. д. Спасибо !!
Я мог бы с первым вариантом, но в проекте новый я не знаю, почему бы этого не сделать в другом проекте ....
Вы знаете, как удалить файлы Font Awesome и начать заново?
@Nico Да, вы можете удалить папку @ fortawesome / в public / fonts / vendor. rm -rf / Users / Nico / Сайты / laravel / public / fonts / vendor / @ fortawesome /
Так что оставить ссылку <link href = "{{ asset('css/app.css') }}" rel = "stylesheet"> по умолчанию и добавить ссылку, которую вы указали выше? Я вижу, что в одном есть mix, а в другом - asset.
@whisk Используйте то или другое.
Если по-прежнему не работает, добавьте это в свой файл микса mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');.
обновите конфигурацию webpack.mix.js, как показано ниже:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
введите в терминале npm run dev и нажмите Enter.
mix.setResourceRoot('../'); сделал это для меня
загружает ли ваш интерфейсный файл CSS в общую папку, в которую был помещен fontawesome?