web-dev-qa-db-fra.com

Rails: Utilisation de Font Awesome

Mon concepteur Web m'a fourni des polices/icônes mises à jour qui ont été ajoutées à font awesome - il les a placées dans un dossier de polices local. On m'a également donné un fichier font-awesome.css. 

J'ai copié directement le dossier des polices dans mes ressources et placé font-awesome.css dans des ressources/des feuilles de style.

Le css est correctement référencé dans mon code, mais aucune des icônes du dossier de polices n'est chargée.

Dois-je faire quelque chose pour que tout soit chargé correctement et/ou que le dossier des polices soit référencé?

ruby-on-railsfontsfont-awesome
54
user464180

d'abord: ajouter app/assets/fonts au chemin de l'actif (config/application.rb)

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

puis déplacez les fichiers de police dans/assets/fonts (créez d'abord le dossier)

Maintenant, renommez le fichier font-awesome.css en font-awesome.css.scss.erb Et modifiez-le comme suit: Change:

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

pour ça:

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

Enfin: vérifiez que toutes les ressources sont chargées correctement (avec Firebug ou Chrome Inspector)

121
VMOrtega

Il existe maintenant un moyen plus simple, ajoutez simplement gem "font-awesome-Rails" à votre Gemfile et exécutez bundle install.

Ensuite, dans votre application.css, incluez le fichier css:

/*
 *= require font-awesome
 */

Il inclut automatiquement les polices-awesome dans votre portefeuille d’actifs. Terminé. Commencez à l'utiliser :)

Pour plus d'informations, consultez la documentation font-awesome-Rails .

46
nathanvda

J'offre une autre réponse, dans celle-ci, vous n'aurez pas à vous soucier des gemmes, des chemins ou de ces solutions excessives. Collez simplement cette ligne dans votre application.html.erb (ou le fichier de votre mise en page)

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

En plus de la réponse de Vicoar

Pour Rails 4, vous devez modifier le CSS légèrement différemment. Notez l'utilisation de 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
EdC

La méthode la plus simple pour intégrer Font Awesome à Rails est la suivante:

SASS Ruby Gem

Utilisez le Ruby Gem SASS officiel de Police Awesome pour obtenir facilement Font Awesome SASS dans un projet Rails.

Ajoutez cette ligne au fichier Gemfile de votre application: 

gem 'font-awesome-sass'

Et ensuite exécuter: 

$ bundle

Ajoutez ceci à votre Application.scss: 

@import "font-awesome-sprockets";
@import "font-awesome";
2
AR Rose

J'ai essayé vicoar, mais cela ne fonctionne pas sur mon projet basé sur Ruby 1.9.3 et Rails 3.2. Ensuite, je renomme le nom de fichier font-awesome.css en font-awesome.css.erb et remplace le @font-face par ceci:

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

Cela fonctionne très bien et le code est très simple ... (vous pouvez vous référer au guide asset_pipeline

1
Tony Han

Comment utiliser font-awesome 4 avec les barebones Rails 6 et Webpacker, sans aucune gemme supplémentaire, sans copier-coller de polices ou de fichiers css dans votre application, ni faire d'autres choses étranges:

Ajoutez le paquet npm font-awesome - package.json:

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

Incluez le fichier css font-awesome dans le manifeste css - app/stylesheets/application.css:

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

Remplacez la définition de font-face dans notre fichier css personnalisé - app/stylesheets/font-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;
}

Inclure les types de fichiers node_modules font-awesome dir + font dans le pipeline d’actifs - config/initializers/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/

Vous aurez les polices incluses et compilées dans le répertoire public/fonts et vous obtiendrez un fichier css unique contenant tous les éléments (votre application et font-awesome) compilés dans celui-ci.

Le problème est que css minified font-awesome contient des chemins codés en dur vers les polices et pour remplacer cela, nous ajoutons simplement la directive font-face aux chemins de polices générés. Pour cette raison, le fichier font-awesome.min.css doit être ajouté en premier dans le fichier manifeste.

1
Vladimir Rozhkov

Venant tout juste de passer à travers cela avec Rails 5.2, j'aimerais vous expliquer comment cela fonctionne si vous ne voulez pas utiliser le joyau de font-awesome-Rails :

  1. Placez les fichiers de polices FontAwesome (EOT, WOFF, etc.) dans un sous-dossier nommé / app/assets, / vendor/assets ou / lib/assets, par exemple: / app/assets/fonts.

  2. Ajoutez cette ligne à config/initializers/assets.rb:

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

  3. Renommez all.css de FontAwesome en all.scss. Si vous ne le faites pas, Rails ne prétraitera pas les références de chemin à l'étape suivante.

  4. Remplacez tous les chemins d'accès aux fichiers de polices par des références de pipeline Rails (par exemple, font-url ou asset-url ):

    par exemple. avant

    @ font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url (".. /webfonts/fa-solid-900.eot"); src: url ("../ webfonts/fa-solid-900.eot? #iefix") au 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 ");}

    par exemple. après

    @ font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: asset-url (" fa-solid-900.eot "); src: format de l'URL de l'actif (" fa-solid-900.eot? #iefix ") (" type-incorporé "), URL de l'actif (" fa-solid- Format 900.woff2 ") (" woff2 "), format de l'URL (" fa-solid-900.woff ") (" woff "), format de l'URL (" fa-solid-900.ttf ") (" truetype "), asset-url (" fa-solid-900.svg # fontawesome ") format (" svg ");}

  5. Redémarrez le serveur.

0
MSC

Pour Rails 3.2. * Une solution rapide:

1) Placez les fichiers awesome de polices dans un dossier "fonts" du dossier public 2) Ouvrez font-awesome.css et remplacez les 4 entrées de "../fonts" par "/ fonts" fichier

@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
Tom