WordPress’ Customizer is one of my favorite parts of WordPress. You will usually see me products taking full advantage of Customizer. Right now I’m working on a library for Customizer, which will consist of some custom WordPress controls written by me.

The very first is a Font Awesome picker customizer control. Font Awesome fonts are used by a lot of themes and they are really amazing. Sadly, I couldn’t find any icon picker for Font Awesome.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/icon-picker/icon-picker-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include icon-picker-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_fa_icon_picker', array(
    'default' => 'fa-facebook',
    'capability' => 'edit_theme_options'
));

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker'
)));

It will a list of all the icons. If only want to list few icons then you can do it like this:

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker',
    'choices' => array(
        'fa-facebook' => __('Facebook', 'textdomain'),
        'fa-twitter' => __('Twitter', 'textdomain'),
        'fa-dribbble' => __('Dribbble', 'textdomain'),
        'fa-wordpress' => __('WordPress', 'textdomain'),
        'fa-github' => __('Github', 'textdomain'),
    )
)));

That will do. If you face any issues then comment below, or feel free to send a pull request.

It’s just the first control, so you can expect few more posts like this in near future.

Update: Icon picker now also supports Genericons and Dashicons, so you can now change the value of iconset to use these two as well.

Also, if you’re using it then please leave a comment telling me your thoughts and the new controls you’d like to see.

Love this control?

If you love this control of O2 library then consider donating from here to support this product.