Font Awesome

Addon by Michael Aerni

Font Awesome Main Screenshot

Statamic Packagist version Packagist Total Downloads

Font Awesome

This Statamic addon adds a Fieldtype to easily search and select Font Awesome icons. It also comes with a Tag to output selected icons in your template. It supports Font Awesome version 5.x and 6.x.

Prerequisites

To use this addon, you need a Font Awesome account. Register here if you don't already have one.

API Token

You need to get your API Token. You can generate one here.

Kit Token

You also need to get the Token of the Kit you want to use. You can create a Kit here. The Kit Token is the number of the Kit, e.g. f481b75381.

Installation

Install the addon using Composer:

composer require aerni/font-awesome

You may publish the config of the package:

php please vendor:publish --tag=font-awesome-config

The following config will be published to config/font-awesome.php:

return [

    /*
    |--------------------------------------------------------------------------
    | API Token
    |--------------------------------------------------------------------------
    |
    | You can get your API Token in your Font Awesome Account Details.
    |
    */

    'api_token' => env('FA_API_TOKEN'),

    /*
    |--------------------------------------------------------------------------
    | Kit Token
    |--------------------------------------------------------------------------
    |
    | The Token of the Kit you want to use, e.g. b121fed549.
    |
    */

    'kit_token' => env('FA_KIT_TOKEN'),

];

Configuration

Add your API Token and Kit Token to your .env file:

FA_API_TOKEN=************************************
FA_KIT_TOKEN=************************************

Usage

Fieldtype

Add the Font Awesome Fieldtype to a Blueprint or Fieldset. The Fieldtype provides the option to only make certain icon styles available for selection.

Note: If you are using a Font Awesome Kit with SVG as technology, you may run into performance issues when selecting icons. Change the technology to Web Font to speed things up.

Template

Add the following Tag to the <head> of your layout view to render the Font Awesome script.

{{ font_awesome:kit }}

You may use a different Kit in your template using the token parameter. This comes in handy if you want to use an SVG Kit in your template but are using a Web Font Kit for your Fieldtype due to performance issues.

{{ font_awesome:kit token="f481b75381" }}

Use the following Tag to render an icon. In this example icon is the variable saved in your content.

{{ font_awesome:icon }}

Credits

Developed by Michael Aerni