This Statamic addon features an icon fieldtype to browse and select Font Awesome 6.x icons. It also comes with a Tag to output selected icons in your template.
Install the addon using Composer:
composer require aerni/font-awesomeYou may publish the config of the package:
php please vendor:publish --tag=font-awesome-configYou may choose between using a Kit or hosting Font Awesome yourself.
If you want to use a Kit, make sure you set the driver option in the config to kit:
'driver' => 'kit'Next, add your API Token and Kit Token to your .env file:
FA_API_TOKEN=************************************
FA_KIT_TOKEN=************************************If you would rather host Font Awesome yourself, you may use the local driver:
'driver' => 'local'Next, download Font Awesome (For The Web) and place the metadata and css directories in the locations defined in the config:
'local' => [
'metadata' => resource_path('fonts/fontawesome/metadata'),
'css' => '/fonts/fontawesome/css/all.min.css',
],The files in the metadata directory are required to get the information about the icons. I recommend placing the metadata in the resources directory, as these files don't need to be publicly accessible.
The css config option defines the public path to the stylesheet that will be loaded in the Control Panel. The stylesheet must be placed in the public directory. The CSS will only be loaded in the Control Panel. You still need to add the stylesheet to your frontend layout yourself.
Add the Font Awesome Fieldtype to a Blueprint or Fieldset. The Fieldtype provides a config option that allows you to make only certain icon styles available for selection.
If you're using the kit driver, add the following Tag to your layout's <head> to render the Font Awesome script.
{{ font_awesome:kit }}Render an icon by using the handle of a Font Awesome field as the wildcard method.
{{ font_awesome:icon_field }}You may also use the shorter tag alias instead.
{{ fa:kit }}
{{ fa:icon_field }}Developed by Michael Aerni