Importing your own icon font family in our Joomla templates

Joomla Template Tutorial: How to check and change available icons

We often get asked about the available icons in our templates and how can they be customized. In this post I will show you where to find the icons in our templates and how to replace them.

First I have to mention that all the templates come with Font Awesome Free icons. Any other icons you find in our templates are imported via the custom.css file and are provided to us by the designers (we do not select which icons to use or import, we just work with what is provided).

Now that we cleared that out, to find which icons we import, you need to go to the following path: templates – template name – css – custom.css file. Here you need to scroll down to the bottom of it and find the css comment /* IMPORT -FONT FAMILY NAME- */ or, in newer templates, we make the import at the top of the document using @import font-family-name.css. In this later case, you need to go to the path specified in the @import and find the available icon names there.

These are the paths where you can find the list of available icons, you can copy any class or icon code from there and change the one you have in the template.

Here is a video example showing exactly the steps:

Moreover, you can install your own icon family if you want. Here is how to do this:

First you need to download the icon font files and the css linking to them. After you just import this css in the custom.css file of the template.

Here is what we are talking about:

I hope with helped clear your thoughts on how the custom icons are imported and how to import your own icons.

Stay tuned!

Windstripe Themes

Related Post

Leave A Comment