Best IT Recipes

Rails: Using Awesome Font

My web designer provided me with updated fonts / badges that were added to the awesome font - he placed this in a local font folder. I was also provided with the font-awesome.css file.

I copied the font folder to my assets directly and placed font-awesome.css in the attributes / style sheets.

Css is correctly referenced in my code, but none of the icons in the font folder load.

Is there anything I need to do to ensure that the font download and / or link to the font folder is correct?

+57
ruby-on-rails fonts font-awesome
Jun 15 '12 at 14:15
source share
9 answers

first: add app / assets / fonts to the resource path (config / application.rb)

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

then move the font files to / assets / fonts (create a folder first)

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: 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; }

:

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

Finally: check if all resources are loaded correctly (with Firebug or Chrome Inspector)

+123
Jun 15 2018-12-18T00:
source share

Now there is an easier way, just add the gem "font-awesome-rails" to your Gemfile and run bundle install .

Then in your application.css include the css file:

 /* *= require font-awesome */

It automatically includes the font-awesome in the pipeline of your asset. Done. Start using it :)

See the font-awesome-rails documentation for more information.

+47
Jul 23 '13 at 9:09 on
source share

I offer a different answer, in this you do not have to worry about gems or paths, or about any of these redundant decisions. Just paste this line into your application.html.erb (or any other file your layout is in)

 <head> ... <link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head>
+20
Mar 23 '14 at 1:10
source share

In addition to Vicoar's answer

For Rails 4, you need to change the CSS a bit. Note the use of 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
Mar 10 '15 at 16:09
source share

Now the next way is the easiest way to integrate the Awesome font with Rails:

SASS Ruby Gem

Use the official Awesome SASS Ruby Gem font to easily get the Font Awesome SASS into a Rails project.

Add this line to your gemfile application:

 gem 'font-awesome-sass'

And then do:

 $ bundle

Add this to your Application.scss:

 @import "font-awesome-sprockets"; @import "font-awesome";
+3
Dec 10 '16 at 12:38
source share

How to use font-awesome 4 with barebones Rails 6 and Webpacker, without any additional gems, copy-paste fonts or CSS files into your application and do other strange things:

Add the awesome npm package - package.json:

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

Include the css font file in the css manifest - app / stylesheets / application.css:

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

Override the font definition in our CSS file - 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; }

Include node_modules font-awesome dir + font file types in the resource pipeline - 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/

You will get the included fonts and compiled into the public / fonts directory, and you will get one css file with all the compiled materials (your application and font-awesome).

The fact is that font-awesome minified css contains hard-coded font paths, and to override this, we simply add the font-face directive with the generated font paths. Because of this, font-awesome.min.css must be added first in the manifest file.

+2
Jul 09 '19 at 19:33
source share

I tried vicoar, but it does not work on my project based on ruby ​​1.9.3 and rails 3.2. Then I rename the font-awesome.css file name to font-awesome.css.erb and change @font-face to this:

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

It works very well and the code is very simple ... (you can refer to the asset_pipeline manual

+1
Aug 15 2018-12-12T00:
source share

Having just walked through Rails 5.2, I would like to share how it works if you don't want to use the font-awesome-rails gem :

  1. Place the FontAwesome font files (EOT, WOFF, etc.) in the appropriate folder with the names in / app / assets , / vendor / assets or / lib / assets , for example: / app / assets / fonts .

  2. Add this line to config / initializers / assets.rb:

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

  3. Rename FontAwesome all.css to all.scss . If you do not, Rails will not pre-process the links in the path in the next step.

  4. Replace all font file paths with Rails pipeline links (i.e. , Font-url or asset-url ):

    eg. before

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

    eg. after

    @ font-face {font-family: 'Font Awesome 5 Free'; : ; : 900; src: asset-url ("fa-solid-900.eot"); 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. Reboot the server.

+1
Sep 24 '18 at 3:30
source share

For rails 3.2. * fast decision:

1) Put awesome font files in the “fonts” folder in the shared folder 2) Open font-awesome.css and change the 4 entries for “../fonts” to “/ fonts” at the top of the file

 @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
Mar 04 '14 at 22:04
source share


More articles:


All Articles