Cacher is the code snippet organizer for pro developers

Loading Font Awesome (No gem)

• Download resources from here
• Stick the webfonts folder in to assets/fonts/
• Use the all.css file
  • Rename to all.scss.erb
  • In css manifest file: use @import "all"
• Icons should now load

Using the font-family attribute

• /assets/fonts/webfonts should contain the eot, woff, and other files
• Whereever the file fontawesome.scss.erb was placed, replace the font-face attributes with:

@font-face {
  font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: auto;
                  src: url(asset_path("webfont/fa-brands-400.eot"));
                  src: url(asset_path("webfont/fa-brands-400.eot?#iefix")) format("embedded-opentype"), 
                     url(asset_path("webfont/fa-brands-400.woff2")) format("woff2"), 
                     url(asset_path("webfont/fa-brands-400.woff")) format("woff"), 
                     url(asset_path("webfont/fa-brands-400.ttf")) format("truetype"), 
                     url(asset_path("webfont/fa-brands-400.svg#fontawesome")) format("svg"); }

.fab { font-family: 'Font Awesome 5 Brands'; }

@font-face {
  font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: auto;
                  src: url(asset_path("webfont/fa-regular-400.eot"));
                  src: url(asset_path("webfont/fa-regular-400.eot?#iefix")) format("embedded-opentype"), 
                     url(asset_path("webfont/fa-regular-400.woff2")) format("woff2"), 
                     url(asset_path("webfont/fa-regular-400.woff")) format("woff"), 
                     url(asset_path("webfont/fa-regular-400.ttf")) format("truetype"), 
                     url(asset_path("webfont/fa-regular-400.svg#fontawesome")) format("svg"); }

.far { font-family: 'Font Awesome 5 Free'; font-weight: 400; }

@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: auto;
                    src: url(asset_path("webfont/fa-solid-900.eot"));
                    src: url(asset_path("webfont/fa-solid-900.eot?#iefix")) format("embedded-opentype"), 
                       url(asset_path("webfont/fa-solid-900.woff2")) format("woff2"), 
                       url(asset_path("webfont/fa-solid-900.woff")) format("woff"), 
                       url(asset_path("webfont/fa-solid-900.ttf")) format("truetype"), 
                       url(asset_path("webfont/fa-solid-900.svg#fontawesome")) format("svg"); }

.fa, .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; }

• You can then access them in your css files:

font-family: 'Font Awesome 5 Free';
content: '\f078';
font-weight: 900;

Note: Since only the solid fonts are free, only he font-weight of 900 can be used with icon availability.