Custom CSS FontAwessome Pseudo Selector

custom-css-fontawessome-pseudo-selector.markdown

Custom CSS FontAwessome Pseudo Selector

A Pen by Caballero75 on CodePen.

License.

index.html

<script src="https://kit.fontawesome.com/96773e460e.js"></script>
<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

style.css

<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>