If you want to use icons in your page, you can choose 2 ways to do it :
- Loading an icons font with CSS (for example Fontawesome as a font) and use CSS classes to show the icons
- Loading the SVG code of the icon in the HTML page
So what to do ? What is the best ?
If you are already using an icons font like Fontawesome in your website of other purposes, then you can continue to use it. There will be no additional load.
If you are not yet using an icons font then you shall prefer to use the SVG icons.
Doing some tests with the Google Pagespeed returns some scoring that we can evaluate.
NOTE : we will do the test WITH Bootstrap, so that the score is much relevant and the comparison gives better results
IMPORTANT NOTE : Fontawesome is also based on SVG icons. We are not discussing "use Fontawesome or not", we are discussing "load the full library using CSS, or just the icons we need as SVG code". In both way, you can use the Fontawesome icons.
Using icons font
For the test, the icons font loaded is Fontawesome, from the CSS stylesheet.
The score is
- Mobile : 88
- Desktop : 97
Here are the screenshots :
Using SVG icons
The score is
- Mobile : 94
- Desktop : 99
Here are the screenshots :
You can see that using a SVG icons is much better. Why ?
Fontawesome stylesheet is a font, this means that it will load a CSS file (about 30 Ko) that list all the existing icons (more than 1000) and load the font files (about 150 Ko). It will add 2 more requests and about 180 Ko in the page. So if you need 2-3 icons in a page, then this is too much.
Using a SVG icon, will put the code directly into the HTML of the page, without additional request. An icon is about 1 Ko.
Without Bootstrap, just for the fun
Just to let you know that a blank template with a single article, without loading Bootstrap and no additional files, gives the following result
The score is
- Mobile : 97
- Desktop : 99
So by default, we can consider that the template is correctly setup. Template Creator CK is designed to let you decide what to do in your template, and as you can see here, by default it looks correct.
The only way to get a 100% score (without using additional SEO plugin, just for a test) is to remove the scripts. But these scripts (jquery, and other JS & CSS) are needed and called by Joomla.
You can then try to use some optimization extension to get the best result.
How to load an icon
Into Template Creator CK you can choose an icon for the module titles. Edit the styles of your module and go in the "Icon styles" tab. You can then select an icon and choose the settings to display it
Click on the Select button, it will open the popup where to select the icon :
Click on the icon that you want to use, and it will be added in the template.