Rails: использование шрифта Awesome

Мой веб-дизайнер предоставил мне обновленные шрифты/значки, которые были добавлены в шрифт awesome - он поместил это в локальную папку шрифтов. Мне также был предоставлен файл font-awesome.css.

Я скопировал папку шрифтов в свои активы напрямую и поместил font-awesome.css в атрибуты/таблицы стилей.

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

Есть ли что-то, что мне нужно сделать, чтобы обеспечить правильную загрузку и/или ссылку на папку шрифтов?

Ответы

Ответ 1

первый: добавьте app/assets/fonts в путь к ресурсу (config/application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts")

затем переместите файлы шрифтов в /assets/fonts (сначала создайте папку)

Теперь переименуем шрифт-awesome.css в font-awesome.css.scss.erb и отредактируйте его так: изменить:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}

:

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

Наконец: проверьте, правильно ли загружены все ресурсы (с Firebug или Chrome Inspector)

Ответ 2

Теперь есть более простой способ, просто добавьте gem "font-awesome-rails" к вашему Gemfile и запустите bundle install.

Затем в ваш application.css включите файл css:

/*
 *= require font-awesome
 */

Он автоматически включает шрифт-awesome в конвейер вашего актива. Готово. Начните использовать его:)

Для получения дополнительной информации просмотрите документацию font-awesome-rails.

Ответ 3

Я предлагаю другой ответ, в этом вам не придется беспокоиться о драгоценных камнях или путях, или о каких-либо из этих излишних решений. Просто вставьте эту строку в ваш application.html.erb (или любой другой файл, в котором находится ваш макет)

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Ответ 4

В дополнение к ответу Vicoar

Для Rails 4 вам нужно немного изменить CSS. Обратите внимание на использование font_url:

@font-face {
  font-family: "FontAwesome";
  src: font_url('fontawesome-webfont.eot');
  src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Ответ 5

Теперь следующим способом является самый простой способ интегрировать шрифт Awesome с Rails:

SASS Ruby Gem

Используйте официальный шрифт Awesome SASS Ruby Gem, чтобы легко получить Font Awesome SASS в проект Rails.

Добавьте эту строку в ваше приложение Gemfile:

gem 'font-awesome-sass'

И затем выполните:

$ bundle

Добавьте это в свой Application.scss:

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

Ответ 6

Как использовать font-awesome 4 с barebones Rails 6 и Webpacker, без каких-либо дополнительных гемов, копировать-вставлять шрифты или CSS файлы в ваше приложение и делать другие странные вещи:

Добавить удивительный пакет шрифтов npm - package.json:

{
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

Включить файл css-шрифтов в CSS-манифест - приложение/стилей /application.css:

/*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

Переопределить определение шрифта в нашем пользовательском файле CSS - приложение/стили/шрифт 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. конфиг/Инициализаторы/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.

Ответ 7

Я пробовал vicoar, но он не работает над моим проектом на основе ruby ​​1.9.3 и rails 3.2. Затем я переименую имя файла font-awesome.css в font-awesome.css.erb и изменим @font-face на это:

@font-face {
  font-family: "FontAwesome";
  src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
  font-weight: normal;
  font-style: normal;
}

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

Ответ 8

Только что пройдя через Rails 5.2, я хотел бы поделиться тем, как это работает, если вы не хотите использовать гем font-awesome-rails:

  1. Поместите файлы шрифтов FontAwesome (EOT, WOFF и т.д.) В подходящую папку с именами в /app/assets, /vendor/assets или /lib/assets, например: /app/assets/fonts.

  2. Добавьте эту строку в config/initializers/assets.rb:

    Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")

  3. Переименуйте FontAwesome all.css в all.scss. Если вы этого не сделаете, Rails не будет предварительно обрабатывать ссылки на пути на следующем шаге.

  4. Замените все пути к файлам шрифтов ссылками конвейера Rails (т. Е. Font-url или asset-url):

    например. до

    @font-face {font-family: 'Font Awesome 5 Free'; font-style: normal; стиль шрифта: нормальный; font-weight: 900; вес шрифта: 900; src: url("../webfonts/fa-solid-900.eot"); src: url ("../webfonts/fa-solid-900.eot"); src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); формат src: url ("../webfonts/fa-solid-900.eot? #iefix") ("embedded-opentype"), формат url ("../webfonts/fa-solid-900.woff2") ( формат "woff2"), url ("../webfonts/fa-solid-900.woff") ("woff"), формат url ("../webfonts/fa-solid-900.ttf") ("truetype") "), url ("../webfonts/fa-solid-900.svg # fontawesome ") формат (" svg "); } }

    например. после

    @font-face {font-family: 'Font Awesome 5 Free'; font-style: normal; стиль шрифта: нормальный; font-weight: 900; вес шрифта: 900; src: asset-url("fa-solid-900.eot"); src: asset-url ("fa-solid-900.eot"); src: asset-url("fa-solid-900.eot?#iefix") format("embedded-opentype"), asset-url("fa-solid-900.woff2") format("woff2"), asset-url("fa-solid-900.woff") format("woff"), asset-url("fa-solid-900.ttf") format("truetype"), asset-url("fa-solid-900.svg#fontawesome") format("svg"); Формат src: asset-url ("fa-solid-900.eot? #iefix") ("embedded-opentype"), формат asset-url ("fa-solid-900.woff2") ("woff2"), asset Формат -url ("fa-solid-900.woff") ("woff"), формат asset-url ("fa-solid-900.ttf") ("truetype"), URL-адрес актива ("fa-solid- Формат 900.svg # fontawesome ") (" svg "); } }

  5. Перезагрузите сервер.

Ответ 9

Для рельсов 3.2. * быстрое решение:

1) Поместите шрифтовые удивительные файлы в папку "fonts" в общей папке 2) Откройте font-awesome.css и измените 4 записи для "../fonts" на "/fonts" в верхней части файла

@font-face
{
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') 
     format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') 
     format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') 
     format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');
     font-weight:normal;
     font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
     font-family:FontAwesome;
     font-weight:normal;
     font-style:normal;
     text-decoration:inherit;
     -webkit-font-smoothing:antialiased;
     *margin-right:.3em;
}