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>
