amy-d
3/23/2017 - 3:48 PM

Setting up an icon system - 2 different options. one that establishes the icon with the style, another as a pseudo element.

Setting up an icon system - 2 different options. one that establishes the icon with the style, another as a pseudo element.

$icons: (
  glass: "\f000",
  music: "\f001",
  search: "\f002",
  envelope-o: "\f003",
  heart: "\f004"
);

@each $name, $icon in $icons {
  .fa-#{$name}:before {
    content: $icon;
  }
}
$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;
  }
}