Установите font awesome 5 с помощью npm для использования scss
как сказано в заголовке, я не могу установить font awesome 5 с помощью npm для целей scss.
Пытаюсь установить версию 5
Согласно https://fontawesome.com/how-to-use/use-with-node-js
npm i --save @fortawesome/fontawesome
Просматривая установку в node_modules, я не вижу файла scss для подключения. Я попытался включить файл styles.css в свой файл app.scss, но это не сработало.
Моя установка для версии 4:
package.json
"font-awesome": "^4.7.0",
app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
Применение
<i className = "fa fa-save icon controlItem"></i>
Проще простого. Как я могу этого добиться с версией 5 ?? Я использую неправильный пакет?
ОБНОВИТЬ
Очевидно, просто использовать @ fortawesome / fontawesome недостаточно. Пакеты были разделены, поэтому вам также нужно выбрать
npm install --save @fortawesome/fontawesome-free-regular
Тем не менее, мне не удалось его импортировать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Насколько я понимаю, FontAwesome 5 заключается в том, что они используют javascript для добавления встроенных SVG в DOM.
Взгляните на эту статью: SVG с JS
Вместо того, чтобы компилировать файл scss, вам просто нужно включить этот javascipt one: fontawesome-all.js, любые значки, которые вы добавляете в свой HTML, должны затем автоматически преобразовываться в SVG.
npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons
В вашем app.js или аналогичном файле Javascript,
import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'
fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)
Для использования есть небольшие изменения в способе использования имен классов. Пожалуйста, обратитесь к иконкам на сайте Fontawesome, чтобы узнать «полные» имена классов.
Пример
<i class = "fas fa-chevron-left"></i>
Хотя идея добавления всех трех вариантов шрифтов в проект кажется удобной, имейте в виду, что это снизит производительность при сборке / компиляции вашего проекта. Таким образом, настоятельно рекомендуется добавлять нужные шрифты вместо всего остального.
Я был сбит с толку, как OP, и дошел до того, что успешно импортировал Font Awesome 5, как в вашем примере. Теперь у меня есть вопрос, на который, возможно, вы знаете ответ: при компиляции моего app.js (с использованием Laravel Mix / webpack) размер выходного файла составляет ~ 2 МБ! Я импортирую только один набор значков Font Awesome (fontawesome-pro-regular) и добавляю его в fontawesome.library в моем app.js. Поскольку они заявляют здесь, что функция fontawesome.library предназначена для явного не импорта всех значков, почему файл становится таким большим?
Извините, я не совсем уверен в этом. Вы должны проконсультироваться с командой Font Awesome. Они лучше всех могут это объяснить.
@Flux Недавно я столкнулся с той же проблемой, что и вы. Сборка с использованием webpack заняла очень много времени.
классно! больше не нужно импортировать файлы css или scss +1
эти пакеты устарели. Измените на: @ fortawesome / free-бренды-svg-icons @ fortawesome / free-regular-svg-icons @ fortawesome / free-solid-svg-icons
В случае, если вы хотите извлечь все файлы Javascript, относящиеся к Font Awesome, на vendor.js с помощью Laravel Mix, вам нужно будет только извлечь пакеты в метод extract() в виде массива. Вам даже не потребуется использовать метод fontawesome.library.add() для добавления поддержки шрифтов. Это поможет вам в будущем управлять файловым кешем конкретного производителя.
mix.js('resources/assets/js/app.js', 'public/js')
.extract([
'@fortawesome/fontawesome',
'@fortawesome/fontawesome-free-brands',
'@fortawesome/fontawesome-free-regular',
'@fortawesome/fontawesome-free-solid',
'@fortawesome/fontawesome-free-webfonts'
]);
Почему-то включение шрифтов в javascript мне кажется неправильным, это шрифт, и он должен принадлежать css, поэтому вот как установить его с помощью scss:
npm install --save @fortawesome/fontawesome-free- добавьте
@import '~@fortawesome/fontawesome-free/css/all.min.css'в свой файл app.scss - теперь подключите app.css к себе в голову и tadaa готово
Добавьте пакет;
npm install --save @fortawesome/fontawesome-free
и добавьте файлы scss в свой app.scss;
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
затем обратитесь к значку в ваших html файлах;
<i class = "far fa-save"></i>
.
Спасибо, хотя в моем 5.0.8 нет fontawesome-all.js - эквивалент npm версии 1.1.4). Я бы предпочел не тянуть его вручную или по URL ..