JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<select id="dtCar" class="form-control select2 font-fas" name="dtCar" data-enpassusermodified="yes">
  <option disabled="disabled">[Select]</option>
  <option value="Key" class="font-fas" style="
    font-variant-ligatures: none;
"> Key</option>
  <option value="Boolean" selected="selected"> Boolean</option>
  <option value="Ordinal"> Ordinal</option>
  <option value="Nominal" style="
    font-variant-ligatures: none;
"> Nominal</option>
  <option value="Interval"> Interval</option>
  <option value="Ratio"> Ratio</option>
</select>

CSS

.font-fab {
  font-family: 'Font Awesome 5 Brands';
  font-variant-ligatures: none;
}

.font-fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-variant-ligatures: none;
}

.font-far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  font-variant-ligatures: none;
}

@font-face {
  font-family: 'Font Awesome 5 Pro nonlig';
  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("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/webfonts/fa-solid-900.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.font-fas {
  font-family: 'Font Awesome 5 Pro nonlig';
  font-weight: 900;
  font-variant-ligatures: none;
}

.font-fab {
  font-family: 'Font Awesome 5 Brands';
  font-variant-ligatures: none;
}

.font-fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-variant-ligatures: none;
}