font-sassy

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.