Рельсы: Использование Шрифта Awesome

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

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

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

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

8 54
ruby-on-rails fonts font-awesome

8 ответов:

первый: добавьте приложение / активы / шрифты в путь к активу (config/application.РБ)

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

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

Теперь переименовать шрифт-удивительным.css для шрифта-потрясающе.стиль CSS.СКС.Эрб и редактировать его так: изменение:

@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 инспектор)

120

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

затем в вашем приложении.УСБ, включить CSS-файл:

/*
 *= require font-awesome
 */

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

для получения дополнительной информации, проверить font-awesome-rails documentation.

44

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

<head>
...
<link href="//use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
</head>
18

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

для 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;
}
14

Я пробовал vicoar, но он не работает на моем проекте, основанном на ruby 1.9.3 и rails 3.2. Затем я переименую имя файла font-awesome.css to 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

1

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

Sass Ruby Gem

использовать официальный шрифт удивительным Сасс Рубин драгоценный камень, чтобы легко сделать шрифт удивительным Сасс в Rails-проект.

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

gem 'font-awesome-sass'

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

$ bundle

добавьте это в свое приложение.СКС:

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

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

1) Поместите файлы Font awesome в папку "шрифты" в общей папке 2) Открыть шрифт-удивительным.css и изменить 4 записи для "../fonts " to "/ 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;
}
0

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

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

  2. добавить эту строку файл config/инициализаторы/активы.РБ:

    рельсы.приложение.конфиг.активы.пути

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

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

    например. раньше

    @font-face { font-family: 'Font Awesome 5 Free'; шрифт-стиль: нормальный; шрифт-вес: 900; src: url ("../ webfonts / fa-solid-900.СРВ"); src: url ("../ webfonts / fa-solid-900.эот?#iefix") формат ("embedded-opentype"), url ("../ webfonts / fa-solid-900.WOFF2") формат ("woff2"), url ("../ webfonts / fa-solid-900.формате WOFF") ("музыка"), URL-адрес("../ webfonts / fa-solid-900.ttf") формат ("truetype"), url("../ webfonts / fa-solid-900.svg#fontawesome") формат ("svg");}

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

    @font-face { font-family: 'Font Awesome 5 Free'; шрифт-стиль: нормальный; шрифт-вес: 900; src: asset-url ("fa-solid-900.СРВ"); src: asset-url ("fa-solid-900.эот?формат #iefix") ("встроенных шрифтов OpenType"), актив-URL-адрес("Альфа-сплошной-900.WOFF2") формат ("woff2"), asset-url ("fa-solid-900.формате WOFF") ("музыка"), актив-URL-адрес("Альфа-сплошной-900.ttf") формат ("truetype"), asset-url ("fa-solid-900.svg#fontawesome") формат ("svg");}

  5. перезапустить сервер.

0