// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href='#'><span class='icon icon-star'></span> Star</a>


@font-face {
  font-family: $icon-font-family-name;
  src: url('#{$icon-font-path}#{$icon-font-file-name}.woff') format('woff');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

// Catchall baseclass
%icon,
.icon {
  display: inline;
  position: relative;
  top: .1em;

  font-family: $icon-font-family-name;
  font-style:  normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@each $name, $glyph in $old-icon-font-glyphs {
  .icon-#{$name}::before { content: $glyph; }
}

// leveling the comment icon
span.icon.fa.fa-comment {
  top: 0;
}