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 : fontello unzipped file directory structure

  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





By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement