ACF Icomoon Icon Field

A WordPress plugin that adds a custom Icomoon Icon Select field type to Advanced Custom Fields. Pick icons from your Icomoon font package directly inside the ACF field editor with a searchable, visual icon picker.

Features

• Visual icon picker — browse and search your full icon set without leaving the post editor
• Responsive icon grid with hover preview and one-click selection
• Search / filter icons by name in real time
• Works with ACF 5.x and 6.x
• Settings page with live icon gallery — click any card to copy the class name to clipboard
• No external dependencies beyond ACF and jQuery (bundled with WordPress)
• Admin-only CSS enqueue — no frontend bloat
• Full security hardening: path traversal prevention, SSRF blocking, nonce + capability checks

Requirements

Installation

1. Download or clone this repository into your wp-content/plugins/ directory:

   cd wp-content/plugins
   git clone https://github.com/your-username/acf-icomoon-icon-field.git

2. Activate the plugin from Plugins → Installed Plugins in your WordPress admin.
3. Follow the Configuration steps below.

Configuration

1. Export your icon set from icomoon.io — you will get a ZIP containing selection.json, style.css, and font files.
2. Upload the exported folder to your theme, e.g. wp-content/themes/your-theme/vendors/icomoon/.
3. In WordPress admin go to ACF → Icomoon Settings.
4. Enter the server path (or HTTPS URL) for:
   • Icomoon JSON File — e.g. /var/www/html/wp-content/themes/your-theme/vendors/icomoon/selection.json
   • Icomoon CSS File — e.g. /var/www/html/wp-content/themes/your-theme/vendors/icomoon/style.css
5. Click Import & Save.

Tip: After a successful import the icon names are stored in the WordPress database. The JSON file can be deleted if you no longer need it. The CSS file (and font files it references) must remain accessible at the same URL.

Usage

Adding the field

1. Open or create an ACF field group.
2. Add a new field and set the Field Type to Icomoon Icon Select.
3. Optionally set a Default Value (e.g. icon-home) and toggle Allow Null.
4. Save the field group.

Getting the value in templates

$icon = get_field( 'your_field_name' );

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

The stored value is the full CSS class string (e.g. icon-home). format_value() runs sanitize_html_class() on it before returning.

Settings Page

Navigate to ACF → Icomoon Settings to:

• Configure the JSON and CSS paths
• View live stats (icon count, prefix)
• Browse the full icon gallery — click any card to copy the class name to your clipboard

Security

• Path traversal — all filesystem paths are resolved with realpath() and must sit within ABSPATH or WP_CONTENT_DIR.
• SSRF — remote URL fetches block private/loopback/reserved IP ranges via gethostbyname() + PHP filter flags.
• File size — JSON files are capped at 2 MB.
• Authentication — all form submissions require manage_options capability and a valid nonce.
• Output escaping — all HTML output uses esc_html(), esc_attr(), and wp_kses() as appropriate.

File Structure

acf-icomoon-icon-field/
├── acf-icomoon-icon-field.php        # Plugin bootstrap, security helpers
├── class-acf-field-icomoon-icon.php  # ACF field type definition
├── settings.php                      # Settings page & save handler
├── assets/
│   ├── css/
│   │   ├── input.css                 # Icon picker field styles
│   │   └── settings.css              # Settings page styles
│   └── js/
│       ├── input.js                  # Icon picker behaviour (jQuery + ACF hooks)
│       └── settings.js               # Settings page gallery & clipboard
└── languages/                        # Translation files (optional)

License

GPL-2.0-or-later — same license as WordPress.

Credits

Built by SmartSites.