This repository has been archived by the owner. It is now read-only.
Slimmer and sassier mixins for Font Awesome
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
bower.json
font-sassy.scss
package.json

README.md

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.