Font Sassy

Slimmer and sassier mixins for Font Awesome without all of the HTML class bloat.

Usage

Set the path for Font Awesome fonts or leave as default for MaxCDN.

$fa-font-path: "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/";

Include Font Sassy

@include "font-sassy";

Add some HTML

<ul>
  <li><a href="#">Github</a></li>
  <li><a href="#">Twitter</a></li>
</ul>

Select Icon

ul li:first-child a:before {
  @include fa;
  @include fa(github);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
}

Adjust Font Size

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-size(2em);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-size(2em);
}

Adjust Font Color

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-color(darkgray);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-color(blue);
}

Add Left Padding

ul li:first-child a:after {
  @include fa;
  @include fa(github);
  @include fa-left(10px);
}
ul li:last-child a:after {
  @include fa;
  @include fa(twitter);
  @include fa-left(20px);
}

Add Right Padding

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-right(10px);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-right(20px);
}

Adjust Vertical Align

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-size(2em);
  @include fa-align(top);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-size(2em);
  @include fa-align(bottom);
}

Rotate the Icon

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-rotate(90deg);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-rotate(180deg);
}

Flip the Icon

ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-flip(horizontal);
}
ul li:last-child a:before {
  @include fa;
  @include fa(twitter);
  @include fa-flip(vertical);
}

Add Spin Animation

@include fa-spin;
ul li:first-child a:before {
  @include fa;
  @include fa(github);
  @include fa-spin(1s);
}
ul li:last-child a:before{
  @include fa;
  @include fa(twitter);
  @include fa-spin(5s);
}

Note: CSS3 Animations aren't supported in IE8 - IE9

Special Thanks

• @dnomak for putting together the original inspiration for this project
• @davegandy for creating the amazing Font Awesome icon set.