Rails: Using Font Awesome

Mój web designer dostarczył mi zaktualizowane Czcionki/Ikony, które zostały dodane do font awesome - umieścił je w lokalnym folderze czcionek. Dostałem też czcionkę-Super.plik css.

Skopiowałem folder fonts bezpośrednio do moich zasobów i umieściłem font-awesome.css w zasobach/arkuszach stylów.

Css jest poprawnie odwołany w moim kodzie, ale żadna z ikon z folderu czcionki nie zostanie załadowana.

Czy jest coś, co muszę zrobić, aby wszystko zostało poprawnie załadowane i / lub że folder czcionek jest odwołany?

Author: simonmorley, 2012-06-15
Source

8 answers

Pierwszy: dodaj app / assets / fonts do ścieżki zasobu (config / application.rb) 

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

Następnie przenieś pliki czcionek do /assets/fonts (najpierw Utwórz folder)

Teraz zmień nazwę czcionki-awesome.css do font-awesome.css.scss.erb i edytuj to w ten sposób: zmiana: 

@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;
}

Do tego: 

@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;
}

Na koniec: sprawdź, czy wszystkie zasoby są ładowane poprawnie (Firebug lub Chrome Inspector)

 120
Author: VMOrtega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-15 03:29:43

Jest teraz łatwiejszy sposób, wystarczy dodać gem "font-awesome-rails" do swojego Gemfile i uruchomić bundle install.

Następnie w aplikacji.css, Dołącz plik css: 

/*
 *= require font-awesome
 */

Zawiera czcionkę-awesome do potoku zasobów automatycznie. Załatwione. Zacznij go używać:)

Aby uzyskać więcej informacji, sprawdź font-awesome-rails documentation.

 44
Author: nathanvda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 09:09:40

Oferuję inną odpowiedź, w tej nie będziesz musiał martwić się o klejnoty, ścieżki lub jakiekolwiek z tych przesadnych rozwiązań. Po prostu wklej ten wiersz w aplikacji.html.erb (lub jakikolwiek plik jest twoim układem) 

<head>
...
<link href="//use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
</head>
 18
Author: Guillermo Siliceo Trueba,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-05 15:09:19

Oprócz odpowiedzi Vicoara

Dla Rails 4 musisz zmienić CSS nieco inaczej. Zwróć uwagę na użycie 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
Author: EdC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-10 16:09:59

Próbowałem vicoara, ale nie działa na moim projekcie opartym na ruby 1.9.3 i rails 3.2. Następnie zmieniam nazwę pliku font-awesome.css na font-awesome.css.erb i zmieniam @font-face na to: 

@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;
}

To działa bardzo dobrze, a kod jest bardzo prosty...(możesz zapoznać się z przewodnikiem asset_pipeline

 1
Author: Tony Han,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-18 00:32:07

Teraz, następujący sposób jest najprostszym sposobem na zintegrowanie Font Awesome z Rails:

SASS Ruby Gem

Użyj oficjalnej czcionki Awesome Sass Ruby Gem, aby łatwo wprowadzić czcionkę Awesome sass do projektu Rails.

Dodaj ten wiersz do pliku Gemfile aplikacji: 

gem 'font-awesome-sass'

A następnie wykonaj: 

$ bundle

Dodaj to do swojej aplikacji.scss: 

@import "font-awesome-sprockets";
@import "font-awesome";
 1
Author: AR Rose,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-10 12:38:58

Dla rails 3.2.* szybkie rozwiązanie:

1) Umieść pliki font awesome w folderze" fonts " w folderze publicznym 2) Open font-awesome.css i zmień 4 wpisy na "../ fonts " to "/ fonts " u góry pliku 

@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
Author: Tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-04 22:30:37

Właśnie przeszedłem przez to z Rails 5.2, chciałbym podzielić się tym, jak to działa, jeśli nie chcesz używać Font-awesome-rails gem :

  1. Umieść Pliki Czcionek FontAwesome (EOT, WOFF, itp.) w odpowiednio nazwanym podfolderze / app / assets, /vendor / assets lub / lib/assets, np.: /app/assets / fonts.

  2. Dodaj tę linię do config/initializers / assets.rb:

    szyny.podanie.config.aktywa.ścieżki

  3. Zmień nazwę FontAwesome ' s all.css to all.scss . Jeśli tego nie zrobisz, Rails nie przetworzy odwołań do ścieżek w następnym kroku.

  4. Zastąp wszystkie ścieżki do plików czcionek referencjami w potoku rails (np. font-url lub asset-url):

    Np. przed

    @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url("../ webfonts / FA-solid-900eot"); src: url("../ webfonts / FA-solid-900eot?# iefix") format ("embedded-opentype"), url("../ webfonts / FA-solid-900woff2") format ("woff2"), url ("../ webfonts / FA-solid-900WOFF") format ("WOFF"), url("../ webfonts / FA-solid-900TTF") format ("truetype"), url ("../ webfonts / FA-solid-900svg#fontawesome") format ("svg"); }

    Np. po

    @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; 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"); }

  5. Uruchom ponownie serwer.

 0
Author: MSC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-24 03:30:11