Как добавить Fontawesome 5 в Symfony 4 с помощью Webpack Encore

Я хочу добавить Font Awesome 5 в мой проект Symfony 4, вот что я сделал:

  • Я добавил шрифт в свой проект, используя пряжу: yarn add --dev @fortawesome/fontawesome-free
  • Я импортировал шрифт awesome в свой основной файл scss (assets/css/app.scss): @import '[email protected]/fontawesome-free/scss/fontawesome';
  • моя конфигурация на бис в Webpack включает мои файлы scss и js: .addEntry('js/app', './assets/js/app.js').addStyleEntry('css/app', './assets/css/app.scss')
  • Я скомпилировал: ./node_modules/.bin/encore dev

Кажется, все в порядке, но когда я пытаюсь использовать потрясающий шрифт на мой взгляд, я получаю вместо этого только квадратную иконку. Сгенерированный файл app.css выглядит нормально, так как я вижу шрифтовые определения значков, например:

.fa-sign-out-alt:before {
    content: "\F2F5";
}

Просто кажется, что часть "контент" отсутствует, я думаю, потому что шрифты не загружены... Нужно ли что-то добавлять для загрузки веб-шрифтов? Я попытался добавить шрифт awesome js в свой файл app.js, но это ничего не меняет. Я также попытался добавить пользовательские загрузчики в конфигурацию бис-пакета моего веб-пакета (например, https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2) Я тоже пытался очистить кеш, тот же результат...

Любая идея?

ОТВЕТЫ

Ответ 1

В соответствии с документами о шрифтах здесь, после установки пакета

yarn add --dev @fortawesome/fontawesome-free

или же

npm install --save-dev @fortawesome/fontawesome-free

Требуйте font-awesome в ваш конфигурационный файл (в моем случае и расположение по умолчанию Symfony 4) assets/js/app.js:

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

Снова скомпилируйте yarn encore dev и иконки должны появиться

Ответ 2

Добавление @import '~ @fortawesome/fontawesome-free/scss/fontawesome'; недостаточно. Вам нужно добавить одну (или любую комбинацию) этих файлов (в зависимости от вашего прецедента)

@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/brands';

Ответ 3

Я думаю, что нашел решение вашей проблемы. Это, наверное, не лучшая, а отправная точка. Согласно Font Awesome Documentation, вы должны добавить all.css в свой код. Или там @fontface imports.

import '[email protected]/fontawesome-free/css/all.css';

Ответ 4

Следующее, как указано выше, прекрасно работает для меня:

npm install @fortawesome/fontawesome-free @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons -D

Добавьте следующее в файл .scss

@import '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/brands';

работает с webpack 4

{
    test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: 'url-loader?limit=10000',
},
{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: 'file-loader',
},
{
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
        'file-loader?name=images/[name].[ext]',
        'image-webpack-loader?bypassOnDebug'
    ]
}]

Ответ 5

Джовани имеет право. Далее вы должны посмотреть на группу значков. Каждая иконка в font-awesome имеет свою группу. Если вы забудете об этом, вы получите квадратный значок.

<i class="fab fa-accusoft"></i>
<i class="fas fa-address-book"></i>

Ответ 6

Вам необходимо установить copy-webpack-plugin, пожалуйста, следуйте инструкциям ниже, и это сработает для вас 1- установите плагин

yarn add copy-webpack-plugin --dev

2 добавьте следующую строку в свой webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

3: компилировать

yarn run encore dev

снова проверьте страницу, теперь она должна показывать отсутствующие значки