Description

Typeahead search for FontAwesome icons.

Note: currently only supports FontAwesome v4.7.0

Installation

Simply copy the FontAwesome folder into site/addons/. That's it!

Usage

Example Fieldset

fields:
  my_awesome_list:
    type: grid
    fields:
      text:
        type: text
      icon:
        type: font_awesome

View in CP FontAwesome Fieldtype


Filtering

When adding a FontAwesome field to a fieldset you can apply filters so that only certain icons are available - the possible categories are listed on the FontAwesome website. Select a filter under the field 'extras' in the control panel, filters add a category_filter option to the data:

fields:
  icon:
    type: font_awesome
    category_filter:
      - 'Chart Icons'
      - 'Currency Icons'

Example Template

<ul class="my-awesome-list">
    {{ my_awesome_list }}
        <li>
            {{ font_awesome:icon }}
            {{ text }}
        </li>
    {{ /my_awesome_list }}
</ul>

Rendered HTML

<ul class="my-awesome-list">
    <li>
        <i class="fa fa-file-excel-o" aria-hidden="true"></i>
        Excel Files
    </li>
    <li>
        <i class="fa fa-search" aria-hidden="true"></i>
        Search
    </li>
    <li>
        <i class="fa fa-bolt" aria-hidden="true"></i>
        Speed
    </li>
</ul>

Important Links
Details
Released March 25, 2018
Updated 5 months ago
Version v1.3
Downloads 452
Requires Statamic 2

Aryeh Raber

More by Aryeh Raber