Skip to content

Add inline SVG icons from the Font Awesome icon library to your Perch site without any Javascript

Notifications You must be signed in to change notification settings

Pipits/pipit-fa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

Pipit Font Awesome

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

Installation

The app

  • Download the latest version of the app.
  • Unzip the download
  • Place the pipit_fa folder in perch/addons/apps
  • Add pipit_fa to your app list in perch/config/apps.php

Font Awesome

  • Download Font Awesome (Free or Pro)
  • Get the folder advanced-options/raw-svg and place it in your project. Feel free to rename it.
  • Add svg-with-js/css/fa-svg-with-js.css to your document (or write your own CSS)

Requirements

  • Perch or Perch Runway 3.0 or higher

Configuration

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

Usage

PHP

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

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

Parameters

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

Exampels:

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">