@font-face {
    font-family: 'htn-icons';
    src:  url('fonts/htn-icons.eot?xfhyyl');
    src:  url('fonts/htn-icons.eot?xfhyyl#iefix') format('embedded-opentype'),
      url('fonts/htn-icons.ttf?xfhyyl') format('truetype'),
      url('fonts/htn-icons.woff?xfhyyl') format('woff'),
      url('fonts/htn-icons.svg?xfhyyl#htn-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="htn-"], [class*=" htn-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'htn-icons' !important;
    speak: never;
    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;
  }
  
  .htn-pneus:before {
    content: "\e900";
    color: #77787b;
  }
  .htn-abracadeira:before {
    content: "\e901";
    color: #808285;
  }
  .htn-alavanca-cambio:before {
    content: "\e902";
    color: #808285;
  }
  .htn-caixa-direcao:before {
    content: "\e903";
    color: #77787b;
  }
  .htn-cambio-dianteiro:before {
    content: "\e904";
    color: #77787b;
  }
  .htn-cambio-traseiro:before {
    content: "\e905";
    color: #77787b;
  }
  .htn-canote:before {
    content: "\e906";
    color: #808285;
  }
  .htn-cassete:before {
    content: "\e907";
    color: #77787b;
  }
  .htn-corrente:before {
    content: "\e908";
    color: #808285;
  }
  .htn-freio:before {
    content: "\e909";
    color: #808285;
  }
  .htn-guidao:before {
    content: "\e90a";
    color: #77787b;
  }
  .htn-manopla:before {
    content: "\e90b";
    color: #808285;
  }
  .htn-mesa:before {
    content: "\e90c";
    color: #77787b;
  }
  .htn-movimento-central:before {
    content: "\e90d";
    color: #808285;
  }
  .htn-pedais:before {
    content: "\e90e";
    color: #808285;
  }
  .htn-pedivela:before {
    content: "\e90f";
    color: #77787b;
  }
  .htn-quadro:before {
    content: "\e910";
    color: #77787b;
  }
  .htn-rodas-1:before {
    content: "\e911";
    color: #808285;
  }
  .htn-selim:before {
    content: "\e912";
    color: #808285;
  }
  .htn-garfo:before {
    content: "\e913";
    color: #77787b;
  }