Font-Awesome Sass gem for use in Ruby/Rails projects
CSS Ruby
Latest commit 2200fc6 Oct 25, 2016 @supercodepoet supercodepoet committed on GitHub Merge pull request #130 from FortAwesome/4.7.0-wip
Update to 4.7.0
Failed to load latest commit information.
assets Update to 4.7.0 Oct 24, 2016
lib Update to 4.7.0 Oct 24, 2016
.gitignore Updates May 4, 2016
Gemfile initial creation Jul 12, 2013
LICENSE.txt initial creation Jul 12, 2013 Update to 4.7.0 Oct 24, 2016
Rakefile initial creation Jul 12, 2013
font-awesome-sass.gemspec Updates for some PRs Aug 18, 2015


Gem Version

'font-awesome-sass' is a Sass-powered version of FontAwesome for your Ruby projects and plays nicely with Ruby on Rails, Compass, Sprockets, etc.

Refactored to support more Ruby environments with code and documentation humbly used from the excellent bootstrap-sass project by the Bootstrap team


Please see the appropriate guide for your environment of choice:

a. Ruby on Rails

In your Gemfile include:

gem 'font-awesome-sass', '~> 4.7.0'

And then execute:

bundle install

Import the FontAwesome styles in your app/assets/stylesheets/application.css.scss. The font-awesome-sprockets file includes the sprockets assets helper Sass functions used for finding the proper path to the font file.

@import "font-awesome-sprockets";
@import "font-awesome";

Rails Helper usage

In your view:

# => <i class="fa fa-flag"></i>
icon('flag', class: 'strong')
# => <i class="fa fa-flag strong"></i>
icon('flag', 'Font Awesome', id: 'my-icon', class: 'strong')
# => <i id="my-icon" class="fa fa-flag strong"></i> Font Awesome

Note: the icon helper can take a hash of options that will be passed to the content_tag helper

b. Compass without Rails

Install the gem

gem install font-awesome-sass

If you have an existing Compass project:

# config.rb:
require 'font-awesome-sass'

Import the FontAwesome styles

@import "font-awesome-compass";
@import "font-awesome";

Upgrading from FontAwesome::Sass 3.x

Prepend the fa class to existing icons:

3.x Syntax

<i class="icon-github"></i>

4.x Syntax

<i class="fa fa-github"></i>