converse.js/sass/font-awesome.scss

@font-face {
  font-family: 'Baumans';
  font-style: normal;
  font-weight: 400;
  src: local('Baumans Regular'), local('Baumans-Regular'), url('../webfonts/baumans.ttf') format('truetype');
}

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url('../webfonts/muli.ttf') format('truetype');
}

@font-face {
  font-family: 'ConverseFontAwesomeBrands';
  font-style: normal;
  font-weight: normal;
  src: url('../webfonts/fa-brands-400.eot');
  src: url('../webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
  url('../webfonts/fa-brands-400.woff2') format('woff2'),
  url('../webfonts/fa-brands-400.woff') format('woff'),
  url('../webfonts/fa-brands-400.ttf') format('truetype'),
  url('../webfonts/fa-brands-400.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'ConverseFontAwesomeRegular';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/fa-regular-400.eot');
  src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/fa-regular-400.woff2') format('woff2'),
    url('../webfonts/fa-regular-400.woff') format('woff'),
    url('../webfonts/fa-regular-400.ttf') format('truetype'),
    url('../webfonts/fa-regular-400.svg#fontawesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ConverseFontAwesomeSolid';
  font-style: normal;
  font-weight: 900;
  src: url('../webfonts/fa-solid-900.eot');
  src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('../webfonts/fa-solid-900.svg#fontawesome') format('svg'),
  url('../webfonts/fa-solid-900.woff2') format('woff2'),
  url('../webfonts/fa-solid-900.woff') format('woff'),
  url('../webfonts/fa-solid-900.ttf') format('truetype');
}

@import "@fortawesome/fontawesome-free/scss/variables";
@import "@fortawesome/fontawesome-free/scss/mixins";
@import "@fortawesome/fontawesome-free/scss/core";
@import "@fortawesome/fontawesome-free/scss/larger";
@import "@fortawesome/fontawesome-free/scss/fixed-width";
@import "@fortawesome/fontawesome-free/scss/list";
@import "@fortawesome/fontawesome-free/scss/bordered-pulled";
@import "@fortawesome/fontawesome-free/scss/animated";
@import "@fortawesome/fontawesome-free/scss/rotated-flipped";
@import "@fortawesome/fontawesome-free/scss/stacked";
@import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader";

#conversejs {
  .far {
    font-family: 'ConverseFontAwesomeRegular' !important;
    font-weight: 400;
  }
  .fa,
  .fas {
    font-family: 'ConverseFontAwesomeSolid' !important;
    font-weight: 900;
  }

  .fab {
    font-family: 'ConverseFontAwesomeBrands';
  }

  .fa, .far, .fas, .fab {
      display: inline-block;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  /* Apparent font-awesome bug? The circle has some kind of bottom margin */
  .fa-info-circle {
      height: 1em;
  }
}