A WordPress plugin that adds an IcoMoon icon selector field to Advanced Custom Fields (ACF). This field allows you to easily integrate IcoMoon icons into your ACF fields.

• 🎯 Easy integration with IcoMoon App
• 🎨 Visual icon picker interface
• 🔍 Search functionality with icon tags
• 💫 Live icon preview
• 🔄 Multiple return formats (class, unicode, or both)
• 🎉 Compatible with ACF Pro 5.0.0 and later
• 🌐 Translation ready

• WordPress 5.8 or later
• PHP 7.4 or later
• Advanced Custom Fields Pro 5.0.0 or later
• IcoMoon selection.json file

1. Download the plugin
2. Upload the plugin files to the /wp-content/plugins/acf-icomoon directory
3. Activate the plugin through the 'Plugins' screen in WordPress
4. Make sure you have Advanced Custom Fields Pro installed and activated

1. Go to IcoMoon App
2. Select or import your icons
3. Click "Generate Font"
4. Download the package
5. Upload the selection.json file and font files to your theme/plugin

Add the IcoMoon font files and CSS to your theme:

// In your theme's functions.php
function theme_enqueue_icomoon() {
    wp_enqueue_style(
        'icomoon',
        get_template_directory_uri() . '/path/to/style.css'
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_icomoon');

1. Create a new field
2. Select "IcoMoon" as field type
3. Configure the field settings:
   • Enter the URL to your selection.json file
   • Choose return format (class, unicode, or both)
   • Set placeholder text
   • Enable/disable null value

acf_add_local_field([
    'key' => 'field_icomoon',
    'label' => 'Icon',
    'name' => 'icon',
    'type' => 'icomoon_select',
    'json_url' => 'https://your-domain.com/path/to/selection.json',
    'allow_null' => true,
    'return_format' => 'both', // 'class', 'unicode', or 'both'
    'placeholder' => 'Select an icon'
]);

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

// Get unicode value
$icon_unicode = get_field('icon', false, false, ['return_format' => 'unicode']);
echo '<span style="font-family: icomoon">' . $icon_unicode . '</span>';

// Get both formats
$icon = get_field('icon', false, false, ['return_format' => 'both']);
echo '<i class="' . esc_attr($icon['class']) . '" data-unicode="' . esc_attr($icon['unicode']) . '"></i>';

The plugin provides several filters for customization:

// Change the default JSON URL
add_filter('rhicomoon_json_url', function() {
    return 'https://your-domain.com/path/to/selection.json';
});

// Modify assets URL
add_filter('rhicomoon_assets_url', function($url) {
    return $url;
});

• Node.js 14 or later
• npm or yarn

1. Clone the repository
2. Install dependencies:

npm install

3. Available commands:

npm run build   # Build assets for production
npm run dev     # Start development server
npm run watch   # Watch for changes

acf-icomoon/
├── assets/
│   ├── js/
│   │   └── select-icon.js
│   └── sass/
│       └── style.scss
├── fields/
│   ├── acf-field-icomoon-select-v4.php
│   └── acf-field-icomoon-select-v5.php
├── lang/
├── ACFIcoMoonPlugin.php
├── gulpfile.js
└── package.json

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the GPL v2 or later - see the LICENSE file for details.

• Created by Rhuan Carlos
• Uses jQuery FontIconPicker

If you find a bug or have a feature request, please open an issue.