This package is no longer being maintained, please use the new Font Awesome addon instead.
Typeahead search for Font Awesome icons.
This addon adds a new Fieldtype to the CP making it easy to search and select Font Awesome icons. Additionally, a Tag is provided to make outputting icons inside your templates a breeze. See usage section below for full example.
Install the addon via composer:
composer require aryehraber/statamic-font-awesome
Publish the fieldtype assets & config file:
php artisan vendor:publish --provider="AryehRaber\FontAwesome\FontAwesomeServiceProvider"
Add your Font Awesome Kit URL to the config (or .env file) to get started using the addon.
Get started using a Font Awesome Kit here: https://fontawesome.com/start.
Important note: this addon currently only supports the Web Font Kit in the CP. If you would like to use the SVG Kit, please create 2 Kits and use the Web Font version in the above config file, then skip the {{ font_awesome:kit }} tag and add your SVG Kit Code to your template manually.
Fieldset
fields:
-
handle: feature_list
field:
type: grid
fields:
-
handle: text
field:
type: text
-
handle: icon
field:
type: font_awesomeTemplate
<head>
{{ font_awesome:kit }}
</head>
<body>
<ul class="feature-list">
{{ feature_list }}
<li>
{{ font_awesome:icon }}
{{ text }}
</li>
{{ /feature_list }}
</ul>
</body>Rendered HTML
<head>
<script src="https://kit.fontawesome.com/[YOUR_KIT_ID_HERE].js" crossorigin="anonymous"></script>
</head>
<body>
<ul class="feature-list">
<li>
<i class="fas fa-file-excel" aria-hidden="true"></i>
Excel Files
</li>
<li>
<i class="fas fa-search" aria-hidden="true"></i>
Search
</li>
<li>
<i class="fas fa-bolt" aria-hidden="true"></i>
Speed
</li>
</ul>
</body>