Font Awesome app

The Pipit Font Awesome app gives you the ability to add inline SVG icons from the popular Font Awesome icon library without any Javascript.


The app

Font Awesome



In your perch/config/config.php add the path of the advanced-options/raw-svg folder.

If you added the folder to /assets in your root directory, you would define the path like so:

define('PIPIT_FA_SVG_DIR', dirname(PERCH_PATH).'/assets/raw-svg');



pipit_fa_icon('fal fa-angle-down');

With options:

Option What it means
class Adds classes to the SVG tag
default_class If set to false, the app won’t add the default CSS class to the SVG tag. Deafult: true.
title Adds a <title> inside the SVG tag for semantic icons
role Adds the role attribute to the SVG tag. Default: img
fill Adds the fill attribute to the <path>. Default: currentColor
pipit_fa_icon('fal fa-angle-down', [
    'class' => 'my-custom-class another-class',
    'default_class' => false,
    'title' => 'My title',
    'role' => 'img',
    'fill' => '#ffffff',

You can also return icon instead of echoing it:

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

Perch Templates

Besides the icon attribute, an id and the html attribute are also required.

<perch:fa id="twitter" icon="fab fa-twitter" html>

Additional options can be added as attributes:

<perch:fa id="twitter" icon="fab fa-twitter" html role="img" class="custom-class another-class" fill="red">