About FieldtypeFontIconPicker

Module allow you to use Font-Awesome, Ionicons and other icon libraries easily. You can select icons directly from icon select list, also you can set settings for each InputfieldFontIconPicker.

Category 1Admin Helpers
Admin helper modules are those that provide helpful tools, UI enhancements or optimizations to the admin panel (excluding Fieldtype or Inputfield modules).
Category 2Field Types
Fieldtype modules that represent a data type used by fields.
Category 3Input Fields
Inputfield modules that provide a UI input widget in the ProcessWire admin.
Category 4Markup Generation
Markup modules that are called upon to generate or parse markup (like HTML). Markup modules are most often used on the front-end of a site (rather than admin).
Release StateStable
Should be safe for use in production environments. *
Module Version1.0.0
Class NameFieldtypeFontIconPicker
Compatibility2.5, 2.6, 2.7, 3.0
Date AddedJanuary 30, 2015
Last UpdatedMay 8, 2018
Recommended ByNew recommendations may take up to 1 day to appear.


This module's files should be placed in /site/modules/FieldtypeFontIconPicker/
How to install or uninstall modules



This field-type allow to you easily pick icons from input-field. This module using jQuery fontIconPicker as icon selector. You can see supported icon libraries below. If you need to use custom fonts you can check below example.

Supported Icon Libraries


NOTE: Module store data without prefix, you need to add "prefix" when you want to show your icon on front-end, because some of front-end frameworks using font-awesome with different "prefix".

Example :

if($my-icon-field) echo "<i class='my-prefix-{$my-icon-field}' />";

Hook Before Render Example This example using /site/templates/admin.php file for hook

wire()->addHook('InputfieldFontIconPicker::beforeRender', function($event) {
    if(!$event->return) return;

    // Get Input Name (For specified input hook, if you want apply all InputfieldFontIconPicker remove inputName check)
    $inputName = "";
    if(isset($event->object->attributes['name'])) $inputName = $event->object->attributes['name'];

    // Get Input Name (For specified input hook, if you want apply all InputfieldFontIconPicker remove inputName check)
    if($inputName == 'icon_picker') {

        * Load your custom icons function file
        * Your array need to be same format with Icons/FontAwesome.php or Icons/Ionicons.php
        * Also you can pass directly an array

        // Set icons as $icons variable
        $icons = MyCustomIconsArray();

        // Set your options
        $return = array(
            'attributes' => array(
                'category' => '',
                'theme' => 'fip-grey',
                'empty-icon' => 1,
                'empty-icon-value' => '',
                'icons-per-page' => 20,
                'has-search' => 1
            'icons' => $icons

        // Return the event
        $event->return = $return;


MarkupFontIconPicker Usage

// MarkupFontIconPicker::render(YourIconField=string, Options=array)
echo MarkupFontIconPicker::render($page->YourIconField, [
        'prefix' => 'uk-icon-', // Icon class prefix, if you have different prefix, default is : "fa fa-"
        'tag' => 'span', // Icon tag default is : "i"
        'class' => 'fa-lg', // If you have extra cutom classes, for example : icons sizes, Array or Sting value
        'style' => 'your custom styles if you have' // Array or String Value

Screenshots - InputfieldFontIconPicker input settings

InputfieldFontIconPicker Setting "Category Select"

InputfieldFontIconPicker Field Settings Category Select

InputfieldFontIconPicker Setting "Theme Select"

InputfieldFontIconPicker Field Settings Theme Select

Screenshots - InputfieldFontIconPicker page edit views

InputfieldFontIconPicker Search


InputfieldFontIconPicker Categories