hubl/src/styles/components/icons/icons.scss

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/simple-line-icons.eot?23594131');
  src: url('../fonts/simple-line-icons.eot?23594131#iefix')
      format('embedded-opentype'),
    url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
    url('../fonts/simple-line-icons.woff?23594131') format('woff'),
    url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
    url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
      format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'simple-line-icons';
    src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
  }
}
*/
%icon,
[class^='icon-']:before,
[class*=' icon-']:before {
  font-family: 'simple-line-icons';
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

$icons: (
  user-female: '\e000',
  people: '\e001',
  user-follow: '\e002',
  user-following: '\e003',
  user-unfollow: '\e004',
  user: '\e005',
  trophy: '\e006',
  speedometer: '\e007',
  social-youtube: '\e008',
  social-twitter: '\e009',
  social-tumblr: '\e00a',
  social-facebook: '\e00b',
  social-dropbox: '\e00c',
  social-dribbble: '\e00d',
  shield: '\e00e',
  screen-tablet: '\e00f',
  screen-smartphone: '\e010',
  screen-desktop: '\e011',
  plane: '\e012',
  notebook: '\e013',
  mustache: '\e014',
  mouse: '\e015',
  magnet: '\e016',
  magic-wand: '\e017',
  hourglass: '\e018',
  graduation: '\e019',
  ghost: '\e01a',
  game-controller: '\e01b',
  fire: '\e01c',
  eyeglass: '\e01d',
  envelope-open: '\e01e',
  envelope-letter: '\e01f',
  energy: '\e020',
  emotsmile: '\e021',
  disc: '\e022',
  cursor-move: '\e023',
  crop: '\e024',
  credit-card: '\e025',
  chemistry: '\e026',
  bell: '\e027',
  badge: '\e028',
  anchor: '\e029',
  wallet: '\e02a',
  vector: '\e02b',
  speech: '\e02c',
  puzzle: '\e02d',
  printer: '\e02e',
  present: '\e02f',
  playlist: '\e030',
  pin: '\e031',
  picture: '\e032',
  map: '\e033',
  layers: '\e034',
  handbag: '\e035',
  globe-alt: '\e036',
  globe: '\e037',
  frame: '\e038',
  folder-alt: '\e039',
  film: '\e03a',
  feed: '\e03b',
  earphones-alt: '\e03c',
  earphones: '\e03d',
  drop: '\e03e',
  drawar: '\e03f',
  docs: '\e040',
  directions: '\e041',
  direction: '\e042',
  diamond: '\e043',
  cup: '\e044',
  compass: '\e045',
  call-out: '\e046',
  call-in: '\e047',
  call-end: '\e048',
  calculator: '\e049',
  bubbles: '\e04a',
  briefcase: '\e04b',
  book-open: '\e04c',
  basket-loaded: '\e04d',
  basket: '\e04e',
  bag: '\e04f',
  action-undo: '\e050',
  action-redo: '\e051',
  wrench: '\e052',
  umbrella: '\e053',
  trash: '\e054',
  tag: '\e055',
  support: '\e056',
  size-fullscreen: '\e057',
  size-actual: '\e058',
  shuffle: '\e059',
  share-alt: '\e05a',
  share: '\e05b',
  rocket: '\e05c',
  question: '\e05d',
  pie-chart: '\e05e',
  pencil: '\e05f',
  note: '\e060',
  music-tone-alt: '\e061',
  music-tone: '\e062',
  microphone: '\e063',
  loop: '\e064',
  logout: '\e065',
  login: '\e066',
  list: '\e067',
  like: '\e068',
  home: '\e069',
  grid: '\e06a',
  graph: '\e06b',
  equalizer: '\e06c',
  dislike: '\e06d',
  cursor: '\e06e',
  control-start: '\e06f',
  control-rewind: '\e070',
  control-play: '\e071',
  control-pause: '\e072',
  control-forward: '\e073',
  control-end: '\e074',
  calender: '\e075',
  bulb: '\e076',
  chart: '\e077',
  arrow-up-circle: '\e078',
  arrow-right-circle: '\e079',
  arrow-left-circle: '\e07a',
  arrow-down-circle: '\e07b',
  ban: '\e07c',
  bubble: '\e07d',
  camrecorder: '\e07e',
  camera: '\e07f',
  check: '\e080',
  clock: '\e081',
  close: '\e082',
  cloud-download: '\e083',
  cloud-upload: '\e084',
  doc: '\e085',
  envelope: '\e086',
  eye: '\e087',
  flag: '\e088',
  folder: '\e089',
  heart: '\e08a',
  info: '\e08b',
  key: '\e08c',
  link: '\e08d',
  lock: '\e08e',
  lock-open: '\e08f',
  magnifier: '\e090',
  magnifier-add: '\e091',
  magnifier-remove: '\e092',
  paper-clip: '\e093',
  paper-plane: '\e094',
  plus: '\e095',
  location-pin: '\e096',
  power: '\e097',
  refresh: '\e098',
  reload: '\e099',
  settings: '\e09a',
  star: '\e09b',
  symble-female: '\e09c',
  symbol-male: '\e09d',
  target: '\e09e',
  volume-1: '\e09f',
  volume-2: '\e0a0',
  volume-off: '\e0a1',
  phone: '\e600',
  menu: '\e601',
  options-vertical: '\e602',
  options: '\e603',
  arrow-down: '\e604',
  arrow-left: '\e605',
  arrow-right: '\e606',
  arrow-up: '\e607',
  paypal: '\e608',
  social-instagram: '\e609',
  social-linkedin: '\e60a',
  social-pintarest: '\e60b',
  social-github: '\e60c',
  social-google: '\e60d',
  social-reddit: '\e60e',
  social-skype: '\e60f',
  social-behance: '\e610',
  social-foursqare: '\e611',
  social-soundcloud: '\e612',
  social-spotify: '\e613',
  social-stumbleupon: '\e614',
  minus: '\e615',
  organization: '\e616',
  exclamation: '\e617',
  social-vkontakte: '\e618',
  event: '\e619',
  social-steam: '\e620',
  idea:'\e076'
);


@each $name, $code in $icons {
  .icon-#{$name} {
    &:before {
      content: $code;
    }
  }
}
@mixin icon($code) {
  &:before {
    @extend %icon;
    @extend .icon-#{$code};
  }
}