Almost all our templates (except the oldest ones) support Font Awesome icons, the most popular icon font in the world. We are writing this tutorial to explain how you can enable Font Awesome in Joomla, using our Joomla templates (or any other template) and how to use the icons in your Joomla articles and custom HTML modules.
If Joomla template you are using is based on our Sparky Framework, then enabling Font Awesome is very easy. You need to go to Extensions > Templates and click on your template name. In Sparky options, select Features tab and Scripts sub-tab.
On older Joomla templates, you will need to manually edit template files to enable this icon font. This is a short guide on how to achieve this:
- Download the Font Awesome collection from https://fontawesome.com/ and unpack it on your computer.
- Upload entire /fonts folder from this archive to the /css folder of your template (for example: /templates/my_template/css)
- Upload file font-awesome.min.css from the /css folder of the archive to the /css folder of your template (for example: /templates/my_template/css)
- Edit index.php file of your template (for example: /templates/my_template/index.php) and add this inside the head tag (ideally before other CSS stylesheets):
<link rel="stylesheet" href="https://my-site.com/templates/my_template/css/font-awesome.min.css">Of course, you will need to change my-site.com with your site name and my_template with your template name.
Your site will be configured to use Font Awesome icons after these simple steps. Now let's learn how to actually insert an icon into the Joomla article or custom HTML module.
- Some Joomla editors can cut the icon HTML code, so it's recommended to disable the editor in the Joomla configuration. Also, you can configure the editor plugin not to strip out the icon containers <i>
- Find an icon that you'd like to insert on https://fontawesome.com/icons/ and click on the icon's name.
- You will see the HTML code for this icon, in the example:
<i class="fa fa-briefcase" aria-hidden="true"></i> - Paste this code in your Joomla article or custom HTML module.
Can you see the icon on your site in the place where you paste the icon code? If you can, congratulations! You just learned how to insert a Font Awesome icon in your Joomla content.
The icon's size and color can be adjusted through CSS. In the above example, you can see that our sample icon has a class of "fa-briefcase". You can change the size and color of this icon if you add this in your template's CSS file:
.fa-briefcase {
font-size:24px;
color: green;
}
However, this will be applied to all icons of this type throughout your site. If you rather want to have differently sized and colored icons of the same type, you can place them inside containers, like this:
<div class="icon1"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<div class="icon2"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
Now, in your CSS file, you can change the properties of the container, not the icon itself, like this:
.icon1 {
font-size:48px;
color: red;
}
.icon2 {
font-size:12px;
color: blue;
}
The above example will show one big red briefcase icon and one small blue briefcase icon.