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.