Icon Picker

A searchable icon grid powered by Font Awesome Free 5. Editors click to select an icon; the field returns either the class string or a ready-to-use <i> element.

Settings

Return values

return_format: 'class'

Returns a plain CSS class string.

$icon = get_field('my_icon'); // "fas fa-home"
if ($icon) {
    echo '<i class="' . esc_attr($icon) . '"></i>';
}

return_format: 'html'

Returns the complete <i> element with the class already applied — echo it directly.

$icon_html = get_field('my_icon'); // "<i class=\"fas fa-home\"></i>"
if ($icon_html) {
    echo $icon_html; // already escaped
}

Usage

Displaying in a template

$icon = get_field('card_icon');
if ($icon) {
    echo '<span class="card-icon"><i class="' . esc_attr($icon) . '"></i></span>';
}

Using in a loop

while (have_posts()) {
    the_post();
    $icon = get_field('feature_icon');
    if ($icon) {
        echo '<i class="' . esc_attr($icon) . ' feature-icon"></i>';
    }
}

Conditional display

$icon = get_field('status_icon');
$label = get_field('status_label');

if ($icon && $label) {
    printf(
        '<span class="status"><i class="%s"></i> %s</span>',
        esc_attr($icon),
        esc_html($label)
    );
}