Icon Field

Overview

The Icon field opens a searchable icon picker modal showing the full ThemePlus icon library with 350+ FontAwesome icons. It returns the selected icon class string. Use it for feature icons, social icons, button icons, section decoration, or any other icon option in your theme.

---

Field Registration

php

[
    'id'      => 'feature_icon',
    'type'    => 'icon',
    'title'   => __('Feature Icon', 'your-textdomain'),
    'subtitle' => __('Icon displayed beside the feature title', 'your-textdomain'),
    'default' => 'fa-solid fa-star',
]

---

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — used as the option key
type	string	✅	Must be icon
title	string	✅	Label shown above the field
subtitle	string	—	Smaller descriptive text shown below the label
desc	string	—	Help text shown below the icon picker
default	string	—	Default icon class string (e.g. fa-solid fa-star)
required	array	—	Conditional logic rules — see Conditional Logic

---

Return Value

Type: string

Returns the full FontAwesome class string of the selected icon (e.g. fa-solid fa-star), or the default value if nothing has been saved yet.

php

$icon = themeplus_get_option( 'feature_icon', 'fa-solid fa-star' );
// Returns: 'fa-solid fa-star'

---

Usage Examples

Basic icon output

php

$icon = themeplus_get_option( 'feature_icon', 'fa-solid fa-star' );

echo '<i class="' . esc_attr( $icon ) . '"></i>';

Icon with a label

php

$icon  = themeplus_get_option( 'contact_icon', 'fa-solid fa-envelope' );
$email = themeplus_get_option( 'contact_email', '' );

if ( $email ) {
    echo '<a href="mailto:' . esc_attr( $email ) . '" class="contact-link">';
    echo '<i class="' . esc_attr( $icon ) . '"></i>';
    echo '<span>' . esc_html( $email ) . '</span>';
    echo '</a>';
}

Multiple icons in a features section

php

[
    'id'      => 'feature_1_icon',
    'type'    => 'icon',
    'title'   => __('Feature 1 Icon', 'your-textdomain'),
    'default' => 'fa-solid fa-bolt',
],
[
    'id'      => 'feature_2_icon',
    'type'    => 'icon',
    'title'   => __('Feature 2 Icon', 'your-textdomain'),
    'default' => 'fa-solid fa-shield',
],
[
    'id'      => 'feature_3_icon',
    'type'    => 'icon',
    'title'   => __('Feature 3 Icon', 'your-textdomain'),
    'default' => 'fa-solid fa-gear',
],

php

$options = themeplus_get_option();

$features = [
    ['icon' => $options['feature_1_icon'] ?? 'fa-solid fa-bolt',   'label' => __('Fast', 'your-textdomain')],
    ['icon' => $options['feature_2_icon'] ?? 'fa-solid fa-shield', 'label' => __('Secure', 'your-textdomain')],
    ['icon' => $options['feature_3_icon'] ?? 'fa-solid fa-gear',   'label' => __('Flexible', 'your-textdomain')],
];

echo '<div class="features">';
foreach ( $features as $feature ) {
    echo '<div class="feature">';
    echo '<i class="' . esc_attr( $feature['icon'] ) . '"></i>';
    echo '<span>' . esc_html( $feature['label'] ) . '</span>';
    echo '</div>';
}
echo '</div>';

Social icon link

php

[
    'id'      => 'social_icon',
    'type'    => 'icon',
    'title'   => __('Custom Social Icon', 'your-textdomain'),
    'default' => 'fa-brands fa-github',
],
[
    'id'      => 'social_url',
    'type'    => 'text',
    'title'   => __('Social Profile URL', 'your-textdomain'),
    'default' => '',
],

php

$icon = themeplus_get_option( 'social_icon', 'fa-brands fa-github' );
$url  = themeplus_get_option( 'social_url', '' );

if ( $url ) {
    echo '<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">';
    echo '<i class="' . esc_attr( $icon ) . '"></i>';
    echo '</a>';
}

With a conditional field

php

[
    'id'      => 'show_scroll_icon',
    'type'    => 'toggle',
    'title'   => __('Show Scroll Down Icon', 'your-textdomain'),
    'default' => true,
],
[
    'id'       => 'scroll_icon',
    'type'     => 'icon',
    'title'    => __('Scroll Down Icon', 'your-textdomain'),
    'default'  => 'fa-solid fa-chevron-down',
    'required' => ['show_scroll_icon', '==', true],
],

---

Notes

• ThemePlus includes FontAwesome 7 — the icon class format is fa-solid fa-icon-name, fa-regular fa-icon-name, or fa-brands fa-brand-name. Always use the full two-class format.
• Always escape the icon class with esc_attr() before outputting in an HTML attribute.
• FontAwesome CSS is automatically enqueued by ThemePlus on the admin page. For the frontend, make sure FontAwesome is enqueued in your theme.