Add fonts from icomoon to project

add-icomoon.md

Create or add fonts

• Import selection.json file into icomoon app.
• Import the new svg icon.
• Export as font.
• Unpack and add all the selection.json, .eot, .svg, .ttf and .woff files to the project, replacing the existing files if there are any.

Register the font with @font-face

• Look for the _icon.scss partial file
• You can register the unicode as a variable and use it, or add it directly to the css. (see icon-ic_deploy vs icon-ic-sort)

$icon-route: '../fonts/sidra';

$icon-ic_deploy: '\e900';

@font-face {
  font-family: 'sidra-icon';
  src: url('#{$icon-route}/sidra-icon.eot?rfqe2l'),
    url('#{$icon-route}/sidra-icon.eot?rfqe2l#iefix')
    format('embedded-opentype'),
    url('#{$icon-route}/sidra-icon.ttf?rfqe2l') format('truetype'),
    url('#{$icon-route}/sidra-icon.woff?rfqe2l') format('woff'),
    url('#{$icon-route}/sidra-icon.svg?rfqe2l#sidra-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sidra-icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

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

.icon-ic_deploy {
  &::before {
    content: $icon-ic_deploy;
    color: #66e1e4;
  }
}

.icon-ic-sort {
  &::before {
    content: '\e93c';
  }
}