CODEWITHSUNDEEP
ruby-on-railsfont-awesome
Denis Morin
Denis Morin

Reputation: 83

Using Font-awesome pro in rails

I'm new with font-awesome in rails, and I try to find an easy way to install font-awesome pro in rails? I have search the web, but there is so many unclear solution. Could someone can give me an easy way to achieve this installation?

I have a pro account,

I do not want to use CDN,

I'm using rails 5.1.4 and ruby 2.5.0p0

Thanks

Upvotes: 0

Views: 745

Answers (1)

RWDJ
RWDJ

Reputation: 816

The documentation about "Rails" is really in Sass, but that's only because Rails uses Sass by default. Not to mention, the original documentation is actually specific to Sass and thus isn't perfectly tailored to Rails.

Using Sass, hosting Font Awesome yourself and allowing Sass inheritance:

  • Downloading Font Awesome. Google Hosting Font Awesome Yourself and click the first result. Download and unarchive the zip file.
  • Putting Font Awesome in your Rails project.
    • Create the folders /vendor/assets/fonts and /vendor/assets/stylesheets if they do not exist.
    • From your Font Awesome unarchived download:
      • place scss into /vendor/assets/stylesheets and rename it fontawesome.
      • place webfonts into /vendor/assets/fonts and rename it fontawesome.

  • Importing the font to your Sass. In your application.scss (with chosen styles), preferably at or near the top:

    $fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/<style>"; // for each style you use
  • Edit styles to properly import assets. Inside each style's scss (i.e. brands.scss), there are url links. Change each url to asset-url to properly use the rails asset pipeline.

  • Precompile the font. This can be configured a multitude of ways, but I put in assets.rb:

    Rails.application.config.assets.precompile << File.join('fontawesome', /\.(?:svg|eot|woff2?|ttf)\z/.to_s)

Example with Inheritance for a solid home button with the class nav-home:

# /app/assets/stylesheets/application.rb
$fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/solid";

.nav-home {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-home);
  }
}

# /app/views/<view>/<view_action>.html.erb
<%= link_to('', root_path, class: 'nav-home') %>

This makes an icon-only home button.

Alternatively, you could use html links or scripts, but I think you'd miss out on using Sass inheritance and really cleaning up your html.erb.

Upvotes: 1

Related Questions