How do you include a Font Awesome icon in your sass file?

Question

How do you use the @include to use a Font awesome icon in you sass file.

E.g - If I wanted to use this icon: http://fortawesome.github.io/Font-Awesome/icon/pencil/

I understand that you can use it in your HTML like this:

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

However I want to be able to do the following or something similar:

.class-name {
    @include: fa-icon(fa-pencil);
}

What is the default/proper way to do this?

Answer 1

Not sure if anyone will find this helpful but I created a mixin that extended the .fa class rather than editing the existing @mixin fa-icon()

Custom Mixin

@mixin icon($icon) {
    @include fa-icon;
    @extend .fa;
    @extend .fa-#{$icon}:before;
}

Usage

.foo:before {
    @include icon(pencil);
}

Where 'pencil' is the name of the icon referenced here (minus the fa-): https://fortawesome.github.io/Font-Awesome/icons/

Update for Font Awesome 5:

@mixin icon($icon) {
  @include fa-icon;
  @extend .fas;
  @extend .fa-#{$icon};
}