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.
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:
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" />
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.
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.
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" />
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.