Font Awesome has an official Ruby on Rails gem for free and pro icons.
How to Install
There are different ways to install the free version vs. the pro version.
Add the Font Awesome Ruby gem to your Gemfile
:
gem "font-awesome-pro-sass", "VERSION"
gem "font-awesome-sass", "~> VERSION"
Time to Bundle
In the terminal and in your project folder:
Import Font Awesome
Add the following to the app/assets/stylesheets/application.css.scss
file:
@import "font-awesome-pro" ;
Huh, where's the 'application.css.scss' file?
If the app/assets/stylesheets/application.css.scss
does not exist then
rename the app/assets/stylesheets/application.css
and add the @import "font-awesome"
statement below the *= require statements but outside of the
comment block.
Style Time
Next, you need to choose which style of icons you want to use in your project. You may import any number of the styles. Font Awesome has the following styles:
@import "font-awesome-pro/brands" ;
@import "font-awesome-pro/solid" ;
@import "font-awesome-pro/regular" ;
@import "font-awesome-pro/light" ;
@import "font-awesome-pro/thin" ;
@import "font-awesome-pro/duotone" ;
@import "font-awesome-pro/sharp-solid" ;
@import "font-awesome-pro/sharp-regular" ;
@import "font-awesome-pro/sharp-light" ;
@import "font-awesome-pro/sharp-thin" ;
@import "font-awesome-pro/sharp-duotone-solid" ;
# Nothing additional needed to install for free icons.
# Brands, free solid, and free regular icons are included with the import above.
Add Those Icons
It’s time!
< i class = "fa-solid fa-alien" ></ i >
< i class = "fa-regular fa-alien" ></ i >
< i class = "fa-light fa-alien" ></ i >
< i class = "fa-thin fa-alien" ></ i >
< i class = "fa-duotone fa-solid fa-alien" ></ i >
< i class = "fa-sharp fa-solid fa-alien" ></ i >
< i class = "fa-sharp fa-regular fa-alien" ></ i >
< i class = "fa-sharp fa-light fa-alien" ></ i >
< i class = "fa-sharp fa-thin fa-alien" ></ i >
< i class = "fa-sharp-duotone fa-solid fa-alien" ></ i >
< i class = "fa-brands fa-font-awesome" ></ i >
< i class = "fa-solid fa-user-secret" ></ i >
< i class = "fa-regular fa-bell" ></ i >
Feeling your oats, add icons using the Rails helper function:
< %= icon('fa-solid', 'alien')%>
< %= icon('fa-regular', 'alien')%>
< %= icon('fa-light', 'alien')%>
< %= icon('fa-thin', 'alien')%>
< %= icon('fa-duotone', 'alien')%>
< %= icon('fa-solid fa-sharp', 'alien')%>
< %= icon('fa-solid fa-regular', 'alien')%>
< %= icon('fa-solid fa-light', 'alien')%>
< %= icon('fa-solid fa-thin', 'alien')%>
< %= icon('fa-solid fa-sharp-duotone', 'alien')%>
< %= icon('fa-brands', 'font-awesome')%>
< %= icon('fa-solid', 'user-secret')%>
< %= icon('fa-regular', 'bell')%>
Alright Stop, Animate, and Listen
Want to animate or change the size of your icons? Here’s how:
< i class = "fa-thin fa-user-secret fa-7x fa-beat" ></ i >
< i class = "fa-solid fa-user-secret fa-7x fa-flip" ></ i >
Or animate with the Rails helper function:
< %= icon('fa-thin', 'alien', class:"fa-7x fa-bounce")%>
< %= icon('fa-light', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-shake')%>
< %= icon('fad', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-beat')%>
< %= icon('fa-solid', 'user-secret', class:"fa-7x, fa-shake")%>
< %= icon('fa-brands', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-shake')%>
< %= icon('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-beat')%>
Note: the icon helper can take a hash of options that will be passed to the content_tag helper
Other Ruby Projects
The path.scss
file contains a function for using the font-path function if found. If the function is not found it will use the $fa-font-path
variable for the path to the webfont files. You can override this variable to where your framework will store the webfonts files.