Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2015
What would you like to do?
ng-store Icon Sass-Map refactor
// Setup an icon array of name modifer keys + content values
// eg. "pencil": "\e602"; becomes a class of .icon--pencil
$icon-types: (
"pencil": "\e602",
"ticket": "\e60d",
"cart2": "\e60f",
"credit": "\e627",
"location": "\e612",
"map": "\e634",
"clock": "\e614",
"calendar": "\e636",
"undo": "\e617",
"undo2": "\e619",
"redo": "\e618",
"redo2": "\e61a",
"forward": "\e61b",
"user": "\e63d",
"spinner": "\e600",
"spinner2": "\e620",
"cancel-circle": "\e63b",
"close": "\e621",
"checkmark": "\e622",
"plus": "\e625",
"minus": "\e624",
"arrow-left": "\e63c"
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg}') format('svg');
font-weight: normal;
font-style: normal;
// Catchall baseclass
.icon {
position: relative;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@each $modifier, $content in $icon-types {
.icon--#{$modifier}:before {
content: $content;
Copy link

benhodgson87 commented Aug 4, 2014

Update to use Sass 3.3 Maps

Storing for when libsass/node-sass supports this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment