There are many reasons why you should use icons font insted of images. The most used method for icons is font awesome. Another alternative would be ico moon but for this you have to pay. Even if is costly icomoon offers you nice features, it has tool which you can convert your svg into font, so you will can use that svg like a font icon the same you use font awesome, we will discuss about this in other post.

Now let's come back to font awesome, there are two methods for implementing font awesome. After you download the css and font files from the official website and upload them on your website you have to make the html/css code for this.

Our HTML:

<div class="items">
    <ul>
      <li class="first_method"></li>
      <li><i class="fa fa-address-book" aria-hidden="true"></i></li>
      <li><i class="fa fa-clone" aria-hidden="true"></i></li>
   </ul>
</div>

As you see we used for the first <li> a class because we need it to target our css code. If you want to add font awesome by css you need to add the unicode of the icon in the "content" declaration for you element and declare FontAwesome as font family, then you can add your custom style for this icon (font-size, color, background if you need and many others we will create few animations with these icons in other tutorial.

Second method is just copy paste the code from the font awesome in your page and that's it. FontAwesome will find the classes "fa fa-something" and will add the icon.

CSS:

.items ul{
  padding-top:40px;
  padding-bottom:40px;
}
.items .first_method:before{
  content:"\f0c9";
  font-family:FontAwesome;
  color:#fff;
  font-size:40px;
}
.items i{
  font-family:FontAwesome;
}

That's it, a little below you can see a list with few icons from font awesome and how easy is to use this font.