font_awesome5_rails provides the Font-Awesome5 web fonts, stylesheets and javascripts as a Rails engine for use with the asset pipeline and with backwards compatibility with font-awesome-rails gem.
This gem provides only Free icons from Font-Awesome.
Keep track of changes in Changelog.
- Basic usage
- Solid, Regular, Light, Brand icon types
- Animations and data attributes
- Layered and Stacked icons
Use as images
FontAwesome 5 Pro icons
Now you have two options how to include FontAwesome 5 icons. First option is to use SVG
and JS
files which is recommended by FontAwesome team. However you can use icons as webfont with CSS
but you will not be able to use new FA5 features as animations or layered_icons
. Choose one installation option from above:
Add this line to your application's Gemfile:
gem 'font_awesome5_rails'
In your application.css
, include the css file:
*= require font_awesome5
or if you prefer scss add this to your application.css.scss
file:
@import 'font_awesome5';
In your application.js
, include the javascript file:
#= require font_awesome5
In your application.css
, include the css file:
*= require font_awesome5_webfont
Gem provides FontAwesome icons through helper. In your views just call fa_icon
.
fa_icon('camera-retro')
# => <i class="fas fa-camera-retro"></i>
fa_icon('camera-retro', style: 'color: Tomato')
# => <i class="fas fa-camera-retro" style="color:Tomato"></i>
fa_icon('camera-retro', class: 'my-class', text: 'Camera', size: '3x')
# => <i class="fas fa-camera-retro my-class fa-3x"></i>
# => <span>Camera</span>
fa_icon(:camera_retro, class: 'my-class')
# => <i class="fas fa-camera-retro my-class"></i>
In Font Awesome 5 there are several different types of icons. In font_awesome5_rails gem default icon type is solid
.
If you want to use different icon style you can do this through type
attribute.
Style | type: | type: |
---|---|---|
Solid | :fas | :solid |
Regular | :far | :regular |
Light | :fal | :light |
Brand | :fab | :brand |
fa_icon('camera-retro', type: :solid) #Default
# => <i class="fas fa-camera-retro"></i>
fa_icon('camera-retro', type: :regular)
# => <i class="far fa-camera-retro"></i>
fa_icon('camera-retro', type: :light)
# => <i class="fal fa-camera-retro"></i>
fa_icon('camera-retro', type: :brand)
# => <i class="fab fa-camera-retro"></i>
fa_icon('camera-retro', type: :fab)
# => <i class="fab fa-camera-retro"></i>
FontAwesome 5 provides new animations and data attributes. Here are some examples how to use them:
fa_icon('camera-retro', animation: 'spin')
# => <i class="fas fa-camera-retro fa-spin"></i>
fa_icon('camera-retro', data: {'fa-transform': 'rotate-90'})
# => <i class="fas fa-camera-retro" data-fa-transform="rotate-90"></i>
In FontAwesome5 the text is right behind icon. For better readability text has defaultly set to padding-left: 5px;
. If you want to override this setting, you can do that through .fa5-text
class in css styles.
FontAwesome 5 newly provides layered icons. For backward compatibility there were preserved fa_stacked_icon
helper, but you can acomplish the same result with fa_layered_icon
.
fa_layered_icon
takes options and block of code that will be rendered inside.
Following fa_layered_icon
examples are written in haml
.
= fa_layered_icon do
= fa_icon 'circle'
# => <span class="fa-layers fa-fw">
# => <i class="fas fa-circle"></i>
# => </span>
= fa_layered_icon style: 'background: MistyRose', size: '4x' do
= fa_icon 'circle', style: 'color: Tomato'
= fa_icon 'times', class: 'fa-inverse', data: { fa_transform: 'shrink-6' }
# => <div class="fa-4x">
# => <span class="fa-layers fa-fw" style="background: MistyRose">
# => <i class="fas fa-circle" style="color: Tomato"></i>
# => <i class="fas fa-times fa-inverse" data-fa-transform="shrink-6"></i>
# => </span>
# => </div>
= fa_layered_icon aligned: :false do
= fa_icon 'circle'
%span.fa-layers-text= "Text"
%span.fa-layers-counter= "1,419"
# => <span class="fa-layers">
# => <i class="fas fa-circle"></i>
# => <span class="fa-layers-counter">1,419</span>
# => </span>
For different base icon type you can use base_type
option.
fa_stacked_icon('camera', base: 'circle')
# => <span class="fa-stack">
# => <i class="fas fa-circle fa-stack-2x"></i>
# => <i class="fas fa-camera fa-stack-1x"></i>
# => </span>
fa_stacked_icon('camera inverse', base: 'circle', type: :fas, class: 'my-class') #Default :fas is default type
# => <span class="fa-stack my-class">
# => <i class="fas fa-circle fa-stack-2x"></i>
# => <i class="fas fa-camera fa-inverse fa-stack-1x"></i>
# => </span>
fa_stacked_icon('camera', base: 'circle', reverse: true, text: 'Text!') #Default: reverse: false
# => <span class="fa-stack">
# => <i class="fas fa-circle fa-stack-1x"></i>
# => <i class="fas fa-camera fa-stack-2x"></i>
# => </span>Text!
fa_stacked_icon('camera', base: 'circle', type: :fas, base_type: :fab)
# => <span class="fa-stack">
# => <i class="fab fa-circle fa-stack-2x"></i>
# => <i class="fas fa-camera fa-stack-1x"></i>
# => </span>
From version 0.2.3
you can include icons as images in your views.
image_tag('fa5/solid/camera.svg')
image_tag('fa5/brand/facebook.svg')
image_tag('fa5/regular/bell.svg', width: '100px', class: 'my-img')
More examples can be found in specs.
More animation and data attributes can be found on FontAwesome documentation.
Due to licence policy this gem pack only free FA5 icons. However fa_icon
helper support all types of icons. If you buyed FA5 Pro icons and want to use helpers provided by this gem it's possible.
- Add this gem to your
Gemfile
without including anything toapplication.css
andapplication.js
. - Download your FA5 pro icons and unpack them.
- Now you will have to manualy include all FA5 files you want to use to your
/assets
folder. - If you're using
svg
files do not forget to include*.svg
in yourassets.rb
file. - You should now be able to use all FA5 Pro icons with helpers provided by this gem.
If you have any questions feel free to create new issue.
The gem is available as open source under the terms of the MIT License.