JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<ul style="list-style: none">
  <li>
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa-globe"></i></span>
      <span>Example</span>
    </a>
  </li>
  <li style="font-size: 20px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa-globe"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
  <li style="font-size: 40px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa-globe"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
</ul>

CSS

/* Font Awesome icon */
a {
  text-decoration: none;
}

.fa-globe::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path fill="%23595959/*@@editorTopBarButtonTextColor@@*/" class="st1" d="M2.3,9.8l6.1,6.1c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4l-4.4-4.4h10.2 c3,0,4.4,1.8,4.4,3.7v7.1c0,0.6,0.5,1,1,1c0.6,0,1-0.4,1-1v-7.1c0-2.8-2.2-5.7-6.4-5.7H5.4l4.4-4.4c0.4-0.4,0.4-1,0-1.4 s-1-0.4-1.4,0L2.3,8.4C1.9,8.8,1.9,9.4,2.3,9.8z"/></svg>');
}