This quick tip will show you how to add icon fonts to any element in your site safely with just CSS.

  1. Set up Font Awecome on Your Site.
  2. The CSS3 pseudo-element ::before will place the icon before the link text.
  3. There are only two critical pieces you need to get an icon font to display: the icon's unicode number, and the font-family
li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f192";
}

Example:

See the Pen Add Font Awecome icon to Any Element with CSS by Andrw (@andrwire) on CodePen.