May 18, 2018
Adding Font Awesome SVG icons with PHP
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:
1<i class="fas fa-home"></i>
When the SVG icons option was introduced, they kept it just as simple which is great because SVGs are great.
So I wrote a PHP class to allow me to add the SVG icons almost just as easily. You can find it on GItHub.
1$FA = new FontAwesomeSVG($dir);23echo $FA->get_svg('fas fa-file');
I've kept the same behaviour when it comes to classes and attributes. And you also still get the auto-accessibility feature.
For semantic icons, the class adds a
<title> inside the SVG like the default JS method does. However it does not add the
aria-labelledby attribute at the moment.
I have also built a Perch app to make it possible to add the SVG icons via PHP or directly in a Perch template. Using the app I can add icons to Perch templates simply like so:
1<perch:fa id="home" icon="fas fa-home" html >
Or via PHP like so: