Icons

Glyphicon

How to use a glyphicon
included with Bootstrap. no need to import anything

example css:
.glyphicon-earphone {
    color:red;
    background-color:blue;
    .tf-fontsize(19); // set it's size
    top:4px; // scoot it down to align vertically with text
}
example HTML:
<span class="glyphicon glyphicon-earphone"><span>

demo:
glyphicon-earphone
glyphicon-phone
glyphicon-wrench
glyphicon-circle-arrow-right
glyphicon-hand-right
glyphicon-hand-left
glyphicon-eye-open
glyphicon-pencil
glyphicon-book
glyphicon-shopping-cart
glyphicon-list-alt
glyphicon-certificate
glyphicon-folder-open
glyphicon-envelope
glyphicon-globe
glyphicon-question-sign

icon list

Font Awesome

how to use fontawesome
imported via child enqueue
NOTE: to use, uncomment in child tf_enqueue.php
NOTE: only works at tf.com if _child_ theme is active
NOTE: also enqueued by Uber Menu so if using that, no need to enqueue in child
demo:
fa-camara-retro
fa-check-square-o
fa-check-square
more info: link
icons: link

example HTML:
<i class="fa fa-phone fa-2x"></i>
note: size fa-2x is a class in ems but can be overridden (add a class or div) in rems or whatever

example for li bullets:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

• List icons
• can be used
• as bullets
• in lists

Simple Icons

These icons are black or white png files with transparent backgrounds, which means the background color can be changed via CSS, and changed on hover, for example.

From: http://simpleicons.org

CSS

.green img {
  background-color: #626D42;
}
.green a:hover img {
  background-color: #6c8889;
}

HTML

<div class="tf-social green">
   <a title="RSS Feed" target="_blank" href="/feed/"> <img decoding="async" src="<?php bloginfo('template_directory'); ?>/social/rss-32.png" alt="rss icon"/> </a>
</div>

Demo

All the icons: