Fontello : How to load and use fonts?

Problem :

You have downloaded the Fontello fonts that you wanted and now you want to get the fonts to display on your webpage. How to call the fonts?

Solution :

1. A typical Fontello font zip file should have directory structure that look like this :

2. Load the CSS file for the pages you want to use the fonts. For example, on this website. I would load the CSS file on the header section like this :

     <link rel="stylesheet" type="text/css" media="screen" href="https://www.socketloop.com/public/assets/fonts/fontello/css/fontello.css">
   

   The fontello.css file should be the default CSS file to load and it handles everything from there.

   NOTE : adjust the include path(href) to suit your website structure.

3. To invoke the font, you can use class="fontello-icon-NAME" in the place where you want the font to appear. For example, in this page Like Us On Facebook widget, the Facebook Fontello font is called by :

     <i class="fontello-icon-facebook></i>
   

Hope this simple tutorial can be useful to you.

Reference :

https://github.com/fontello/fontello/wiki/How-to-use-fontello-fonts-in-your-project