In my SASS I use font-awesome declarations all over the place. I'm in love with it. I've created a SASS mixin for the usage:
I started with the following:
@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
@if $type == 'after'{
&:after {
content:$unicode;
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
@if $type == 'before' {
&:before {
content:$unicode;
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
}
I then scaled it down further to the following:
@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
$beforeOrAfter:'';
@if $type == 'after' {
$beforeOrAfter:'after';
}
@else if $type == 'before' {
$beforeOrAfter:'before';
}
&:#{$beforeOrAfter} {
content:$unicode;
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
The usage would something like:
.tater {
@include font-awesome-icon(before,'\f0de',2.1em,0 0 0 3em,orange,300);
}
But I feel I could make the before/after part cleaner. I basically need to determine if it is a 'before' or 'after'. Any thoughts would be greatly appreciated.
