CodePen Embed - fontawesome CSS Pseudo-elements

<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>

.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";
}

This Pen is owned by sunghee on CodePen.

See more by @dimorin on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.