Использование Font-Awesome Pro в рельсах - PullRequest
Новая
       6

Использование Font-Awesome Pro в рельсах

0 голосов
/ 29 августа 2018

Я новичок в font-awesome в rails, и я пытаюсь найти простой способ установить font-awesome pro в rails? У меня есть поиск в Интернете, но есть так много неясного решения. Может кто-нибудь может дать мне простой способ добиться этой установки?

У меня есть профессиональный аккаунт,

Я не хочу использовать CDN,

Я использую рельсы 5.1.4 и ruby ​​2.5.0p0

Спасибо

1 Ответ

0 голосов
/ 12 мая 2019

Документация по "Rails" действительно написана на Sass, но это только потому, что Rails по умолчанию использует Sass. Не говоря уже о том, что оригинальная документация на самом деле специфична для Sass и поэтому не идеально приспособлена для Rails.

Использование Sass, размещение Font Awesome самостоятельно и разрешение наследования Sass:

  • Загрузка шрифта Awesome. Google Hosting Font Awesome Yourself и нажмите на первый результат. Скачайте и разархивируйте zip-файл.
  • Помещение Font Awesome в ваш Rails-проект.
    • Создайте папки /vendor/assets/fonts и /vendor/assets/stylesheets, если они не существуют.
    • Из вашего Font Awesome разархивированного скачивания
      • поместите scss в /vendor/assets/stylesheets и переименуйте его fontawesome.
      • поместите webfonts в /vendor/assets/fonts и переименуйте его fontawesome.

  • Импорт шрифта в ваш Sass. В ваших application.scss (с выбранными стилями ), предпочтительно в верхней части или около нее: 

    $fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/<style>"; // for each style you use
  • Редактирование стилей для правильного импорта активов. Внутри scss каждого стиля (т.е. brand.scss) есть ссылки url. Измените каждый url на asset-url, чтобы правильно использовать конвейер ресурсов рельсов.

  • Прекомпиляция шрифта. Это может быть настроено множеством способов, но я вставил assets.rb: 

    Rails.application.config.assets.precompile << File.join('fontawesome', /\.(?:svg|eot|woff2?|ttf)\z/.to_s)

Пример с наследованием для сплошной домашней кнопки с классом nav-home: 

# /app/assets/stylesheets/application.rb
$fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/solid";

.nav-home {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-home);
  }
}

# /app/views/<view>/<view_action>.html.erb
<%= link_to('', root_path, class: 'nav-home') %>

Это делает домашнюю кнопку только для иконки.

В качестве альтернативы, вы можете использовать html ссылки или сценарии , но я думаю, что вы упустили бы использование наследования Sass и действительно очистили html.erb.

...