The Font Awesome App

Font Awesome is a popular icon library. It used to be an icon font, but now in Font Awesome 5 it also come with SVG icons.

One reason of Font Awesome’s popularity is the ease of use. You add a CSS file and a JS file to your document, and you’re set. You can then add the icons like so:

<i class="fas fa-home"></i>

When the SVG icons option was introduced, they kept it just as simple which is great. SVGs are great.

However, you may not necessairly want to load extra Javascript on your website just to include icons. And it would be nice to have the SVG icons on there as soon as the page loads - which is one of the benefits of using inline SVGs to begin with.

So I wrote a PHP solution to allow me to add the SVG icons almost just as easily. And I’ve built a Perch app to make it possible to add the SVG icons via PHP or directly in a Perch template.

If you’re here for the non-Perch solution, you can find it on GitHub.

In Perch, you can add an icon in PHP like so:

pipit_fa_icon('fas fa-home');

And in a Perch template you can add an icon like so:

<perch:fa id="home" icon="fas fa-home" html >

Or if you’re using an older version of Perch:

<perch:fa id="home" icon="fas fa-home" html="true" />

Accessibility

Font Awesome now has an auto-accessibility feature:

Getting accessibility right can be tough. So we’ve tried to make it as simple as we can with our auto-accessibility feature. Using a dash of JS, we add supporting HTML elements and attributes so that your icons are accessible to the widest audience possible.

For more details, you can check the Font Awesome documentation.

The app follows the same behaviour and adds the necessary attributes for decorative icons. So you don’t lose the auto-accessibility feature when using the app instead of the default Javascript method.

For semantic icons, the app adds a <title> inside the SVG like the default JS method does. However it does not add the aria-labelledby attribute at the moment.

Options

You have a number of options to use. For instance you can change the colour of the icons like so:

<perch:fa id="home" icon="fas fa-home" html="true" fill="#ffffff" />

In PHP:

pipit_fa_icon('fal fa-angle-down', ['fill' => '#ffffff',]);

You can also return the icon instead of echoing it just like you do in many Perch functions:

$icon = pipit_fa_icon('fal fa-angle-down', [], true);

And you can add CSS classes and overwrite some defaults. More on this in the documentation.

Download the app from here. If you have any trouble, feel free to open a new issue on GitHub.