Skip to content

Instantly share code, notes, and snippets.

@ahaywood
Created March 23, 2017 15:48
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 ahaywood/2f4babe395cbe5b840c928ed8336cff8 to your computer and use it in GitHub Desktop.
Save ahaywood/2f4babe395cbe5b840c928ed8336cff8 to your computer and use it in GitHub Desktop.
Setting up an icon system - 2 different options. one that establishes the icon with the style, another as a pseudo element.
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);
 
/* For each key in the map, created an own class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}
$icons: (
glass: "\f000",
music: "\f001",
search: "\f002",
envelope-o: "\f003",
heart: "\f004"
);
@each $name, $icon in $icons {
.fa-#{$name}:before {
content: $icon;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment