How to generate a list of Font Awesome icons

It’s time for a little PHP snippet! In the next version of my WordPress theme named “Tikva” I needed a list of all Font Awesome icons to let the user choose them in a select field. Unfortunately I didn’t find a complete list of all icons as text file, CSV or a similar formatting.

So I decided to try to get a list of Font Awesome icons with help of a little PHP script. Font Awesome offers the cheatsheet as reference for desktop use or to print as PDF. This page was a great source to crawl, because every information I needed was collected there.

The first step was to get the content of the URL (a PHP one-liner) and to parse the HTML. I wanted to get finished quickly, so I decided to use a 3rd party library. Hint – here is a list of XML/HTML parsing libraries and utilities for PHP. Due to good experiences with the Symfony components I used the Symfony DomCrawler Component and for easier filtering the CssSelector.

So here we go! You have to install composer for dependency management. Here is the very small composer.json file:

{
    "require": {
        "symfony/dom-crawler": "^3.1",
        "symfony/css-selector": "^3.1"
    }
}

And the PHP script:

<?php
require "vendor/autoload.php";
use Symfony\Component\DomCrawler\Crawler;


$fafile = file_get_contents('http://fontawesome.io/cheatsheet/');

$crawler = new Crawler($fafile);

$handle = fopen('fa-icons.txt',"w");



 $crawler->filter('body > div#wrap > div.container > div.row')->children()->each(function (Crawler $node, $i) use ($handle) {
  $text = $node->html();

  $patterns = ["/<span.*<\/span>/im", "/<i class.*<\/i>/im","/<small.*<\/small>/im"];
  $replace = ['','',''];
  $iconname = trim(preg_replace($patterns, $replace,$text)) . "\n";
  fwrite($handle,$iconname);

});

fclose($handle);

This is very straightforward. The script requests the cheatsheet page, opens a file handle for writing and loops through the content by filtering the icon elements. Before writing the icon name it removes the unnecesary nodes, because the icon name is used only. Then the name is written and the script ends.

To use the script, put both composer.json and fa.php into a directory, let Composer install the dependencies by running “composer install” and run the script: php fa.php. There is no fancy commandline interpreter, error handling, caching or something else, it is just to generate the list, and not to display the list on demand on a high-performance website. You will find out if the outfile file is empty or errors are thrown. And if Font Awesome restructures the cheatsheet page, the script will probably fail.

But these few lines helped to solve my problem, so now the theme admin tools can read the Font Awesome icon list and build the select list. That’s all for now!

Oh, I forgot – I tried to get the contents of the nodes by using the DOMElement… It was not very successful, because of the element structure:

<div class="col-md-4 col-sm-6 col-lg-3">
      
      <i class="fa fa-fw" aria-hidden="true" title="Copy to use code">&#xf121</i>
      fa-code
      
      <span class="text-muted">[&amp;#xf121;]</span>
    </div>

I needed the content of the div node, but without the child nodes, and not the text of the child nodes. Another solution was to use the simplexml library.. Here’s the main loop:

$items = $crawler->filter('body > div#wrap > div.container > div.row')->children()->each(function (Crawler $node, $i) use ($handle) {
$text = "<xml>" . $node->html() . "</xml>";

$xml = simplexml_load_string($text);
$iconname = trim((string) $xml) . "\n"; // get contents only, this is the font awesome name

fwrite($handle,$iconname);

});

I was curious about the performance. Just for fun I compared both variants by using simple measurement of the runtime with the help of microtime function (but without measuring the requests of external contents). As result, the version with regular expressions was faster – nearly about 25% to 30%. The simplexml variant is much easier to read, so decide yourself which you would prefer.

Thanks for reading!