Как использовать FontAwesome 5 с Chrome на рельсах?

#css #ruby-on-rails #font-awesome

Вопрос:

Используя приложение Rails 6.1.4.1 и пытаясь обновить FontAwesome с 4 до 5.

gem 'font-awesome-sass', '~> 5.15.1'

В моем app/assets/stylesheets/application.scss досье:

 @import "font-awesome-sprockets";
@import "font-awesome";

Использование FA через icon или через SCSS не работает для Chrome или Firefox. Это прекрасно работает в Safari.

Примеры того, как я его использую:

 .btn-icon {
  @extend .btn;
  amp;:before {
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  amp;:before {
    content: "f067";
  }
}

 link_to icon('fas', 'cogs')   t(:quote_sheet_options), ''

Значки просто не отображаются в Chrome/FF — что здесь происходит?

Обновить

Если я настрою свой css, как показано ниже, он будет работать. Но я все еще не могу использовать icon помощник для отображения каких-либо значков в моей разметке, и я также не могу отобразить значок, добавив разметку вручную.

 .btn-icon {
  @extend .btn;
  amp;:before {
    @extend .fas;
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  amp;:before {
    @extend .fa-plus;
  }
}

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

2. Я проверил, что использую правильный юникод для каждого значка…

3. ладно, ссылка на новую версию fontawesome работает, может быть, опечатка ? инструменты инспектора должны помочь вам увидеть отображаемый исходный код.

4. Я использую драгоценный камень ruby, а не ссылку CDN на FA.

Ответ №1:

Вы можете использовать font_awesome5_rails. Помощника , которого вы будете использовать, нет icon , он есть fa_icon . Есть примеры на font_awesome5_rails, но вот один:

 fa_icon('camera-retro', class: 'my-class', text: 'Camera', size: '3x')

Я надеюсь, что это сработает для вас.