Как использовать font-awesome 4 с barebones Rails 6 и Webpacker без каких-либо дополнительных гемов, копировать шрифт или файлы css в ваше приложение и делать другие странные вещи:
Добавьте пакет font-awesome npm - package.json:
{
"dependencies": {
"font-awesome": "4.7.0"
}
}
Включите файл css с потрясающим шрифтом в манифест css - app / stylesheets / application.css:
/*
*= require font-awesome/css/font-awesome.min
*= require_tree .
*= require_self
*/
Переопределите определение шрифта в нашем пользовательском файле css - app / stylesheets / font-awesome.css.erb:
@font-face {
font-family: 'FontAwesome';
src: url('<%= font_path('fontawesome-webfont.eot') %>');
src: url('<%= font_path('fontawesome-webfont.eot') %>?#iefix') format('embedded-opentype'), url('<%= font_path('fontawesome-webfont.woff2') %>') format('woff2'), url('<%= font_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= font_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= font_path('fontawesome-webfont.svg') %>#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Включите типы файлов node_modules font-awesome dir + font в конвейер ресурсов - config / initializers / assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Вы получите шрифты, включенные и скомпилированные в каталог public / fonts, и вы получите один файл css со всем содержимым (вашим приложением и font-awesome), скомпилированным в него.
Дело в том, что font-awesome minified css содержит жестко запрограммированные пути к шрифтам, и чтобы переопределить это, мы просто добавляем директиву font-face с сгенерированными путями шрифтов. По этой причине в файл манифеста следует сначала добавить font-awesome.min.css.
Однако, хотя все будет работать нормально, в консоли вы получите ошибку 404. Мне не удалось это исправить, и в конце концов я сдался и переключился на font-awesome-sass gem.
person
Vladimir Rozhkov
schedule
09.07.2019
