Joomla 3.x. How to add missing FontAwesome icons

This tutorial shows how to add missing FontAwesome icons in Joomla 3.x.

Joomla 3.x. How to add missing FontAwesome icons

Icons are missing when new version of FontAwesome icons was released or when designer adds only the icons used for dummy content.

When icon is added in Joomla admin panel but it’s still missing on front-end, you will need to add icon unicode into CSS file of the template:

1. Connect to server via FTP or open cPanel file manager and find the templates/themeXXX/css/template.css file.

2. Find the last FontAwesome icon code in template.css, that’s the place where you will be adding new icons, e.g. fa-comments icon:

   

   We strongly recommend saving the template.css backup before editing it.

3. Next, open the templates/themeXXX/less/font-awesome/font-awesome.css file, find the last element of icons list from the template.css file in the file you’ve opened. Copy all the code under it (fa-comments in our case) and paste code at the bottom of template.css.

4. Save changes. You can see that icon is displayed now:

   

5. In case for some reasons the font-awesome.css file is missing in the template, open the css source file on FontAwesome offical site and copy code from the maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css file at the bottom of template.css.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to add missing FontAwesome icons