Rails 5 + Rails Assets + Fontawesome не загружает шрифты

Question

Rails 5 + Rails Assets + Fontawesome не загружает шрифты

При установке Fontawesome через https://rails-assets.org/ и следуя инструкциям по умолчанию, шрифты загружаются некорректно, и все, что я вижу, это поля, указывающие, что URL-адрес, генерируемый для загрузки шрифта, неверен.

6

ruby-on-rails-5 font-awesome rails-assets

Источник

user726239 06 фев '17 в 02:34

6 ответов

Другие вопросы по тегам ruby-on-rails-5 font-awesome rails-assets

user726239 06 фев '17 в 02:42 2017-02-06 02:42 · Answer 1 · 2017-02-06 02:42

ОБНОВЛЕНИЕ: сэкономьте время и поменяйте драгоценные камни. Вот шаги. Я обнаружил, что даже с моим предыдущим ответом есть проблемы с производством. Тем не менее, проще всего получить замечательную работу с:

gem 'font-awesome-rails'
@import "font-awesome"; в вашем файле scss
Готово!

Игнорируйте все ниже этого! если вы абсолютно не хотите использовать gem 'rails-assets-fontawesome'

Похоже, это ошибка в библиотеке, и конвейер ресурсов не находит путь. Исправление, предложенное в этой проблеме, больше не работает, потому что путь, кажется, изменился с тех пор, и в пути шрифта-удивительного больше нет дефиса.

Вот правильное исправление:

Создать новый файл app/assets/stylesheets/font-awesome.scss с содержанием:

fa-font-path: "fontawesome/fonts";
@import "fontawesome";

В application.scss включают:
* = шрифт-офигенный

Это должно решить проблему, и значки должны начать появляться.

Примечания:

Если вы решили переместить font-awesome.scss внутри некоторого каталога под app/assets/stylesheets/somedir/font-awesome.scssтогда вам нужно починить fa-font-path переменная, чтобы иметь правильный относительный путь, например, так:

fa-font-path: "../fontawesome/fonts";

Будьте осторожны с путями и именами!

Файл, который вы создаете, не может быть вызван fontawesome.scss поскольку это имя используется упакованным гемом.
Если у вас есть новейшая версия драгоценного камня rails-assets-fontawesome (4.7.0) тогда импорт и fa-font-path будут использовать fontawesome и не font-awesome как в более старых версиях этого драгоценного камня. Не уверен, насколько далеко назад в версиях это поведение идет.

user1151553 16 мар '19 в 20:32 2019-03-16 20:32 · Answer 2 · 2019-03-16 20:32

За 5.5.0 Версия должна выглядеть так:

$fa-font-path: 'fontawesome/web-fonts-with-css/webfonts';

@import "fontawesome";

// Copy-paste of these files:
// @import "fontawesome/solid";
// @import "fontawesome/regular";
// But url() replaced with font-url() 

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: font-url('#{$fa-font-path}/fa-regular-400.eot');
  src: font-url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: font-url('#{$fa-font-path}/fa-solid-900.eot');
  src: font-url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  font-url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  font-url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  font-url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

user815732 09 мар '18 в 21:06 2018-03-09 21:06 · Answer 3 · 2018-03-09 21:06

У меня это работало с добавлением этих строк в config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

# font-awesome fonts
Rails.application.config.assets.precompile << %r{font-awesome/fonts/[\w-]+\.(?:eot|svg|ttf|woff2?)$}

и имея это, как указано в других ответах:

application.scss

$fa-font-path: "fontawesome/fonts";
@import "fontawesome";

Бежать rake assets:precompile и вы должны увидеть файлы шрифтов в public/assets/font-awesome/fonts

user1476931 23 фев '17 в 19:11 2017-02-23 19:11 · Answer 4 · 2017-02-23 19:11

Не могу комментировать выше, но не должно быть:

$fa-font-path: "fontawesome/fonts";

Вы можете прямо над предложенным импортом драгоценным камнем:

@import "fontawesome";

0

Источник

user1476931 23 фев '17 в 19:11

user6238729 28 май '20 в 02:15 2020-05-28 02:15 · Answer 5 · 2020-05-28 02:15

Если fontawsome 4.*...

Скопируйте шрифты из общей папки fontawsome/fonts for rails: public/fonts

0

Источник

user6238729 28 май '20 в 02:15

user10905541 19 фев '22 в 16:05 2022-02-19 16:05 · Answer 6 · 2022-02-19 16:05

После примерно полутора дней изучения ВСЕХ о конвейере ресурсов, его кеше и других забавных темах, вот как я наконец заставил это работать...

Рельсы 5.2.1
Font Awesome 6 Pro (загружается через npm с использованием .npmrc с лицензионным ключом)
Использование SCSS
Также используя font-awesome-rails (но только для хелперов — обратите внимание, что нет @import "font-awesome";ниже)

      # config/initializers/assets.rb

# Adde node_modules/ to the asset pipeline
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'node_modules')

# Pre-compile any font files located in the asset pipeline
# This tells Rails to precompile the font files, fingerprint them, and place them in /public/assets/ (in the same subdir where they live in the pipeline)
# e.g. 
# node_modules/@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf (pipeline path)
# public/assets/@fortawesome/fontawesome-pro/webfonts/fa-solid-900-229b67ef16372975f562838a5c9f9bd2d9d9905ccc9c77f34c45f3d1f18f016f.ttf (pre-compiled asset path)

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)$/

      # application.scss

@import "@fortawesome/fontawesome-pro/scss/fontawesome.scss";
// Don't use provided font imports b/c we need to use font-url to get asset paths with fingerprints!
// $fa-font-path: "../webfonts"; // Don't use this
// @import "@fortawesome/fontawesome-pro/scss/regular.scss"; // Don't use this
@import "fonts"; // Use this instead so that we can use font-url

      # fonts.scss 

/* Font Awesome 6 */

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-solid-900.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-regular-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: normal;
  src: font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.woff2") format("woff2"),
  font-url("@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf") format("truetype"); }

Кроме того, одной из самых сложных вещей в этом было осознание того, что моя производственная среда не работает так же, как моя среда разработки, поэтому я понял проблему только после развертывания :( Вот как этого избежать...

      # config/environments/development.rb

# Don't use pipeline if asset path fails 
# config.assets.compile defaults to true in dev...so if the pre-compiled asset doesn't exist in public/assets/..., it will just pull from the pipeline and you won't know that you have an issue until you deploy!
config.assets.compile = false # This will raise an exception if the pre-compiled asset not found!
config.assets.debug = false # Pre-compile assets into single file
config.assets.digest = true # Use fingerprinting

Теперь, конечно, это означает, что вам нужно предварительно скомпилировать свои активы в процессе разработки, поэтому вам нужно запустить bundle exec rake assets:precompileиз корневого каталога вашего проекта. Это предварительно скомпилирует ваши активы и поместит их в /public/assets/

Если вы столкнулись с проблемой кеша, когда прекомпилятор на самом деле не перекомпилирует ресурс, вы можете удалить кеш Sprockets, запустив rm -r tmp/cache/assets

После того, как вы успешно перенесли изменения своих активов в рабочую среду, я бы рекомендовал вернуть development.rb к значениям по умолчанию для эффективной разработки. Кроме того, вы можете захотеть bundle exec rake assets:clobberчтобы удалить предварительно скомпилированные активы.

Вот еще одна полезная информация, которую я нашел постфактум... https://guides.rubyonrails.org/asset_pipeline.html#in-development

Надеюсь, это поможет кому-то сэкономить несколько часов «кроличьей норы» :)