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/.

Однако, когда я захожу в браузер, значки выглядят так:

down_icon


npm laravel-5 laravel-mix font-awesome laravel-5.7
person Nico    schedule 20.09.2018    source источник
comment
загружает ли ваш интерфейсный файл CSS в общую папку, в которую был помещен fontawesome?   -  person wheelmaker    schedule 21.09.2018

Ответы (2)


arrow_upward
44
arrow_downward

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') }}">
person Karl Hill    schedule 21.09.2018
comment
Привет, дружище! Спасибо за ответ. Я сделал это, но: ERROR Не удалось скомпилировать с 15 ошибками13: 30: 59 Эти относительные модули не были найдены: * ./@fortawesome//fa-brands-400.eot в ./node_modules/css-loader??ref- -5-2! ./ node_modules / postcss-loader / lib ?? postcss! ./ node_modules / resolve-url-loader ?? ref - 5-4! ./ node_modules / sass-loader / lib / loader.js? ? ref - 5-5! ./ resources / sass / app.scss ... и т.д .... и .... ОШИБКА в ./resources/sass/app.scss Ошибка сборки модуля: ModuleNotFoundError: Модуль не найден : Ошибка: Не удается разрешить './@fortawesome//fa-brands-400.eot' в \ resources \ sass '... и т.д ... Спасибо !! - person Nico; 21.09.2018
comment
Я мог бы с первым вариантом, но в новом проекте, я не знаю, почему бы этого не сделать в другом проекте .... - person Nico; 22.09.2018
comment
Вы знаете, как удалить файлы Font Awesome и начать заново? - person Nico; 22.09.2018
comment
@Nico Да, вы можете удалить папку @ fortawesome / в public / fonts / vendor. rm -rf / Users / Nico / Сайты / laravel / public / fonts / vendor / @ fortawesome / - person Karl Hill; 10.10.2018
comment
Итак, оставлю ли я ссылку по умолчанию <link href="{{ asset('css/app.css') }}" rel="stylesheet">, а также добавлю ссылку, которую вы указали выше? Я вижу, что в одном есть mix, а в другом asset. - person whisk; 09.10.2019
comment
@whisk Используйте то или другое. - person Karl Hill; 09.10.2019
comment
Если по-прежнему не работает, добавьте это в свой файл микса mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts'); - person devfaysal; 06.11.2019

arrow_upward
11
arrow_downward

обновите конфигурацию 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.

person MUHAMMED IQBAL PA    schedule 08.04.2019
comment
mix.setResourceRoot('../'); сделал это для меня - person Victor Jozwicki; 21.06.2019