fs

font-sassy

Slimmer and sassier mixins for Font Awesome

Showing:

Popularity

Downloads/wk

15

Maintenance

No Maintenance Data Available

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial