Documentation

Installation

Step 1: Upload the Plugin Files

• Download the plugin ZIP file from your purchase confirmation email or account dashboard.
• In your WordPress admin dashboard, navigate to Plugins > Add New.
• Click on Upload Plugin at the top of the page.
• Choose the downloaded ZIP file (acf-elementor-custom-icons.zip) and click Install Now.

Step 2: Activate the Plugin

• After installation, click on Activate Plugin.
• The plugin is now active and ready for configuration.

License Activation

Activating your license key ensures you receive updates and support.

Step 1: Navigate to the License Settings

• In the WordPress admin dashboard, go to Settings > ACF Custom Icons License.

Step 2: Enter Your License Key

• In the License Key field, enter the license key provided in your purchase confirmation email.

Step 3: Activate the License

• Click Save Changes to store your license key.
• Click on Activate License.
• A confirmation message will indicate that your license is active.

Note: If you encounter any issues during activation, please contact our support team.

Adding Custom Icons

Step 1: Prepare Your Icon Set

• Ensure your custom icons are in a webfont format (e.g., using tools like IcoMoon or Fontello).
• Generate the icon font files, including the style.css and font files.

Step 2: Upload Icon Sets

• Navigate to Elementor > Custom Icons in the WordPress admin dashboard.
• Click on Add New and upload your icon set files.
• Provide a name for your icon set and save it.

Step 3: Verify Icon Availability

• Your custom icons are now available for selection in the Custom Field.

Using the ACF Custom Icon Field

Step 1: Create or Edit a Field Group

• Go to Custom Fields > Field Groups.
• Click on Add New or edit an existing field group.

Step 2: Add a Custom Icon Field

• Click Add Field.
• Set the Field Label (e.g., “Icon Selection”).
• For Field Type, select Custom Icon.

Step 3: Configure Field Settings

• Adjust any additional settings as needed, such as conditional logic or required status.

Step 4: Assign the Field Group

• Set the location rules to determine where this field group appears.
• Click Publish or Update to save the field group.

Step 5: Use the Field in Posts or Pages

• When editing a post or page where the field group is assigned, you’ll see the Icon Selection field.
• Choose an icon from your custom icon sets.

Using the Elementor Custom Icon Widget

Step 1: Open Elementor Editor

• Edit the page or template where you want to add the custom icon using Elementor.

Step 2: Add the Custom Icon Widget

• In the Elementor widget panel, search for Custom Icon.
• Drag and drop the Custom Icon widget into your layout.

Step 3: Configure the Widget

• In the widget settings, insert the Field Name you wish to display from your custom icon sets.
• Adjust additional settings like size, color, alignment, and styling options.

Step 4: Save Changes

• Click Update to save your changes to the page.

Font Awesome Integration

The plugin includes support for Font Awesome icons, expanding your icon selection significantly.

Using Font Awesome Icons:

• In the ACF Custom Icon field or Elementor Custom Icon widget, Font Awesome icons are available alongside your custom icons.
• Simply search for the desired icon by name or browse through the categories.

Note: Ensure you have an active internet connection, as Font Awesome may load resources from a CDN.