Using Fontello icons

  • If you want to have Fontello icons in your website, you should go to http://fontello.com/
  • Select the icons you would like to use, and download them.
  • In the css folder of the zip file find these two files: fontello.css, animation.css
  • Put them into your ftp, into a css folder:

WordPress:
wp-content/themes/[your theme]/css/fontello.css
wp-content/themes/[your theme]/css/animation.css

Joomla:
templates/[your template]/css/fontello.css
templates/[your template]/css/animation.css

  • Also put the font files there too:

WordPress:
wp-content/themes/[your theme]/font/fontello.eot
wp-content/themes/[your theme]/font/fontello.woff
wp-content/themes/[your theme]/font/fontello.svg
wp-content/themes/[your theme]/font/fontello.ttf


Joomla: 
templates/[your template]/font/fontello.eot

templates/[your template]/font/fontello.woff

templates/[your template]/font/fontello.svg

templates/[your template]/font/fontello.ttf

  • Open up your template's/theme's index.php or header.php file:

Joomla: templates\[your template]\index.php
WordPress: wp-content\themes\[your theme]\header.php

  • And look for this part of the code:
<head>
...
</head>
  • It could be in another file too, just look for them. Between these head tags you should call in the Fontello css files.

WordPress:

<link rel="stylesheet" href="http://xy.com/wp-content/themes/[yourTheme]/css/fontello.css">
<link rel="stylesheet" href="http://xy.com/wp-content/themes/[yourTheme]/css/animation.css">

Joomla:

<link rel="stylesheet" href="http://xy.com/templates/[yourTemplate]/css/fontello.css">
<link rel="stylesheet" href="http://xy.com/templates/[yourTemplate]/css/animation.css">
  • If you would like to see these in the admin backend too, do the same in your admin template/theme:

Joomla: administrator\templates\[your template]\index.php
WordPress: wp-admin\admin-header.php

  • After this you will be able to use the Fontello icons in Text and HTML layers: <i class="icon-emo-wink"></i>