jackmarketon
11/17/2017 - 4:48 PM

Icon Font setup for Postcss Projects

Setup fonts via https://icomoon.io/app

/* This file contains the icons produced via iconmoon */
@font-face {
  font-family: 'font-name';
  src:  url('fonts/font-name.eot?e1re96');
  src:  url('fonts/font-name.eot?e1re96#iefix') format('embedded-opentype'),
    url('fonts/font-name.woff?e1re96') format('woff'),
    url('fonts/font-name.ttf?e1re96') format('truetype'),
    url('fonts/font-name.svg?e1re96#kff-cds') format('svg');
  font-weight: 400;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'font-name' !important; /* stylelint-disable-line declaration-no-important */
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: 8px;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* These are copied from the stylesheet that icomoon provides, and modified */
.iconCopy::before {
  content: '\e904';
}
.iconNew::before {
  content: '\e905';
}