fontawesome.com ::before, ::after

ver 5.15.4 버전 fontawesome 아이콘 가상 클래스 사용 

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

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