Skip to content

Instantly share code, notes, and snippets.

@hougasian
Last active January 4, 2016 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hougasian/a668f43bfdcfe0ba8274 to your computer and use it in GitHub Desktop.
Save hougasian/a668f43bfdcfe0ba8274 to your computer and use it in GitHub Desktop.
sass icon button using font awesome and map-get
// Font Awesome icons used
$icons: (
check: "\f00c",
check-o: "\f05d",
check-circle: "\f058",
circle: "\f111",
circle-o: "\f10c",
circle-o-thin: "\f1db",
pencil: "\f040",
plus: "\f067",
plus-circle: "\f055",
minus: "\f068",
minus-circle: "\f056",
file: "\f0f6",
chevron-down: "\f078",
chevron-up: "\f077",
chevron-right: "\f138",
cart: "\f07a",
help: "\f059",
male: "\f183",
female: "\f182",
ban: "\f00d",
shield: "\f132",
money: "\f0d6",
print: "\f02f",
save: "\f0ee",
rocket: "\f135",
mail: "\f1d8",
phone: "\f10b",
warning: "\f071",
toggle-off: "\f204",
toggle-on: "\f205",
files: "\f0c5",
external: "\f08e"
);
@mixin icon-button ($background-color,$font-color, $icon, $position : before) {
background: $background-color;
color: $font-color;
cursor: pointer;
font-family: sans-serif;
margin: 5px;
padding: 5px 7px;
vertical-align: bottom;
@if #{$icon} != null {
@include fa-icon($position,$icon);
}
}
@mixin fa-icon($position: before, $icon: false, $styles: true, $float:null) {
&:#{$position} {
@if $icon {
content: "#{map-get($icons, $icon)}";
}
@if $styles {
font-family: "Fontawesome";
font-size: 14px;
font-style: normal;
line-height: 1em;
vertical-align: middle;
@if $position == "before" {
padding-right: 10px;
} @else {
padding-left: 10px;
}
@if $float != null {
float: $float;
margin-top: 3%;
}
}
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment