Laravel 5.7 + шрифт Awesome - PullRequest
Новая
       63

Laravel 5.7 + шрифт Awesome

0 голосов
/ 21 сентября 2018

Я пытаюсь включить инструментарий 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

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

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

0 голосов
/ 21 сентября 2018

Для Laravel 5.7 / 5.8 + и Font Awesome 5

Создайте конфигурацию webpack.mix.js. 

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Установите последнюю бесплатную версию FontПотрясающе через менеджер пакетов, такой как npm. 

npm install @fortawesome/fontawesome-free --save

Эта запись о зависимостях должна теперь находиться в вашем package.json. 

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.10.1",

В вашем основном файле 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') }}">
...