Font Awesome is a set of more than 600 icons implemented as a font, i.e., as vector graphics, so the icons can be scaled or given color or manipulated in any of the ways CSS can manipulate fonts. It was created by Dave Gandy, and is open source. You can read more about it here: http://fontawesome.io.

Here's a sample, demonstrating that the icons can be resized:              

The standard way to use Font Awesome on a website is via Font Awesome CDN (BootstrapCDN / maxCDN / StackPath). But I'm so old fashioned that I prefer to not have my website dependent on other websites, if at all possible. So I choose to install Font Awesome locally as part of my Joomla server setup, even though this means that I don't get automatic updates to newer versions of Font Awesome.

Information on how to install Font Awesome locally is fairly scarce, and one set of instructions I found was just plain wrong. Hence, this blog article. (These instructions are based on a Joomla website running on Microsoft IIS, but should be applicable for Linux-based websites too.)

Download and copy the Font Awesome files

Download the .zip file for the current version of Font Awesome from this page: http://fontawesome.io/get-started/.  

Unpack the .zip file.

Copy the font-awesome.min.css file to the css folder for the template files used by your website, for example C:\Websites\Modesty\templates\protostar\css.

Copy the fonts folder to the template files used by your website, so it becomes, for example, C:\Websites\Modesty\templates\protostar\fonts\.

Add a <link> statement to the <head> section of each page

One of the following two HTML <link> statements has to be added to the <head> section of each page that Joomla generates for your website (or at least for every page that uses Font Awesome):

    <link rel="stylesheet" href="/templates/protostar/css/font-awesome.min.css" />

or

    <link rel="stylesheet" href="/../templates/protostar/css/font-awesome.min.css" />

The second version is for when you've enabled the Joomla multilingual feature, so all webpage URLs include a language code like "/en" (English) or "/da" (Danish). (The template name should be replaced by the correct value for your website, of course.)

The standard way to do this is to edit the index.php file for the template you're using, for example C:\Websites\Modesty\templates\protostar\index.php. But I don't like the idea of doing this, at least not for a standard Joomla template like Protostar, because then a future Joomla update might replace that file and then Font Awesome would stop working.

Instead, I prefer to download and install a Joomla plugin called Custom Head, from this website: http://www.logika.com/plg-customhead.

After you've installed the plugin you can go to Extensions - Plugins and find it on the list (search for "head") and click on it. Then configure it as follows:

FontAwesomeSnap1

This should result in the <link> statement being added to the <head> section of the Joomla pages.

One minor problem with the use of this plugin is that it currently does not implement the Joomla! Update System.

Testing Font Awesome

How to use the Font Awesome icons is beyond the scope of this article - see the Font Awesome website, plus lots of other information on the internet.

Note that if things are not working at first that you may need to stop and restart the website using IIS Manager.

You must login to post a comment.
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.