I have just released an updated version of our Zen Shortcode plugin. It's a free Joomla plugin that can be used for a wide range of features including applying the Zen Grid Framework Grid, rendering buttons and Font Awesome icons. The update is a simple update that includes Font Awesome v4.6.3.

This post is a quick overview of the tool we use to populate the list of Font Awesome icons available in the plugin. It may be helpful for other developers trying to find a convenient way to keep track of font icons used in the Font Awesome library.

What is Font Awesome?

If you are new to the idea of font icons they are in a nutshell a way to render icons or symbols on the page using a single font file rather than displaying an image for each symbol. In addition the icons can be manipulated using basic css to adjust the appearance of the symbols on your website.

Font Awesome is an open source project that includes an incredible array of icons for pretty much any use case you may need. You can view a full list of icons in Font Awesome here.

How to retrieve a list of icons in Font Awesome

Each time Font Awesome updates it's icons available in the library, we need to update the list of icons available to the plugin. Rather than adding the icons manually I built a little tool that generates the icon array for us. You can download, fork, improve or generally mess with the tool on Github.

How to use the tool

Step 1. Download the zip file on the Github project page

Step 2. Unzip to your local server eg MAMP, WAMP, XAMP etc

Step 3. Visit the build.php file in your browser. eg localhost:8888/class-names/build.php

Download the tool

Three types of output

The tool will render three different types of output depending on your needs.

Directly in the screen

a. After visiting the build file the page will display a list of all class names directly in the browser using this format:

'500px', 'amazon', 'balance-scale', 'battery-0', 'battery-1', 'battery-2', 'battery-3', 'battery-4', 'battery-empty', 'battery-full', 'battery-half', 'battery-quarter', 'battery-three-quarters',

....

You can edit the build.php file to change the format or to reinstate the fa- prefix.

In a .txt file

b. In addition to the in page output a separate txt file is generated listing the fonts in the same format as rendered on the page ie /list/list-of-fontawesome-fonts.html

In a cheat sheet displaying the icons

c. A cheat sheet with basic styling and font example can be found by visiting the url: localhost:8888/class-names/cheat_sheet/

Download the tool

blog comments powered by Disqus