How to use or implement the icon fonts in your web page? Step by step description

download-button live-demo-button

After discussing what are icon fonts and how do they work, now I’m going to describe how exactly should you implement the icon fonts to your web page.

Just like the normal text fonts, the icon fonts also need the font package. You either can create your own font package by creating a SVG (Scalable Vector Graphics) file or you can download the fonts from many icon-font provider websites. Few of those sites are, Font-Awesome, Modern Pictograms, Foundation Icons, and Fontello. I personally recommend Fontello, cause this site let you chose the different icons and when you download, the package includes the font design and CSS of only those particular fonts which you have selected. So, let me discuss how to implement the icon-fonts of fontello (rest are also similar).

Step 1: Go to and select the fonts you want. Now click on the download button (right top). A zip file will be downloaded.

Step 2: Now extract the zip file somewhere and you will find a folder named “font” inside that. Copy that folder to your web project.

Step 3: After extracting the downloaded .zip file you will also find a folder named “css”. Go inside that and open the fontello.css file in a text editor. Copy the codes and paste them to your css file, which is linked to your html. Or you can copy the whole fontello.css file to your project and link it to your html. Don’t forget to link the “font” folder path in the code of fonlello.css just according to your project. Previously it will be like the following.

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?72578637');
  src: url('../font/fontello.eot?72578637#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?72578637') format('woff'),
       url('../font/fontello.ttf?72578637') format('truetype'),
       url('../font/fontello.svg?72578637#fontello') format('svg');
  font-weight: normal;
  font-style: normal;

Just change the url before the “font” folder accordingly.

Step 4: Now you have to write the html code to make it appear in your web page. The code is just like the following.

<h3><span class="icon-heart-empty"></span> My Heart </h3>
 <h3><span class="icon-picture"></span> Photo </h3>
 <h3><span class="icon-glass"></span> My Wine </h3>
 <h3><span class="icon-user"></span> I Myself </h3>
 <h3><span class="icon-camera"></span> My Camera</h3>

In the fontello.css file you will find few classes at the bottom of the file. Those classes will make the icon font appear in your web page. You just have to put “span”, “p” or any similar tag in your html file and just set the class name accordingly.

And that’s all. Now you will find the icons appearing on your web page. Not only fontello icons, but also all the other icon-font providing sites icon works and can be implemented in similar way.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.