Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Font Awesome mixins

Font Awesome mixins

Sass mixins to add Font Awesome icons to CSS classes/elements, instead of using the fa-* classes in HTML.

@mixin icon($icon, $color: null) {
// http://stackoverflow.com/a/36285419/167815
@include fa-icon;
@extend .fa;
@extend .fa-#{$icon}:before;
color: $color;
}
@mixin icon-before($icon, $margin: null, $color: null) {
&::before {
@include icon($icon, $color);
margin-right: $margin;
@content
}
}
@mixin icon-after($icon, $margin: null, $color: null) {
&::after {
@include icon($icon, $color);
margin-left: $margin;
@content
}
}
// Example usage:
.version-selector-current {
// Either this:
@include icon-after(angle-down, 2px);
// Or this to add custom styles to the icon (::after element)
@include icon-after(angle-down, 2px) {
color: #f00;
}
// Optional other attributes as normal:
color: #000;
cursor: default;
font-weight: 600;
padding: 2px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment