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');



Use the pipit_fa_icon() function to output an icon in PHP:

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


pipit_fa_icon($id, $opts, $return);
Type Description
String Icon ID e.g. fas fa-angle-down
Array Options array, see below
Boolean Set to true to have the value returned instead of echoed.

Options array

Option What it means
class Adds classes to the SVG tag
default_class If set to false, the default CSS class won’t be added to the SVG tag. Deafult: true.
title Adds a <title> inside the SVG tag for semantic icons
title_id Adds an id attribute to <title> and adds aria-labelledby on the SVG tag with the same value
role The value of the role attribute in the SVG tag. Default: img
fill The value of the fill attribute in the <path> inside the SVG. Default: currentColor
aria-* You can add any aria-* attribute to the SVG tag e.g. aria-label


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

With options:

pipit_fa_icon('fas fa-angle-down', [
    'class' => 'my-custom-class another-class',
    'default_class' => false,
    'title' => 'My title',
    'role' => 'img',
    'fill' => '#ffffff',

Return icon instead of echoing it:

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

Perch Templates

Use the perch:fa namespace to render icons in a Perch template. The id and icon attributes are required.

<perch:fa id="twitter" icon="fab fa-twitter" html>
Attribute Description
id An ID of your choosing. It can be anything, but it has to be unique. Use letters, numbers and underscores only
icon Icon ID e.g. fas fa-angle-down
html Set to true to have the SVG tag output without encoding.

The options from the option array can be added as attributes:

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

You can also add aria-* attributes:

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