Using Icon Fields in Elementor native Widgets

This guide explains how to configure and use icon fields in widgets like icon lists, social icons, or reviews. You will learn about the different field types, their behaviors, and how to ensure the icons display correctly.

Overview of Icon Fields

Easy ACF repeater for Elementor allows you to use various types of ACF fields to manage dynamic icons. The field type you choose determines the input format and behavior:

• Image or File Field: Allows users to upload an SVG file.
• Text, Radio, or Select Field: Users select or enter the Font Awesome class of an icon (e.g., fas fa-user).

Each field type has specific configurations and requirements to ensure compatibility.

Using Image or File Fields

Configuration

1. Purpose: Use these fields to upload SVG icons. Not every scenario requires uploading icons or graphics directly to your site. This approach is particularly convenient when you need access to a wide range of pre-designed, externally sourced icons that can be dynamically assigned.
2. File Type: Ensure that only SVG files are uploaded.
   • Other file types (e.g., PNG, JPG) are unsupported.
3. Field Configuration in ACF:
   • Set the return format to either URL or Array.
   • The Array option is the preferred choice as it ensures you have access to both the file URL and metadata.

Tips

• Verify that the uploaded SVG is properly formatted and optimized.
• Test the SVG file to ensure it displays as expected.

Using Text, Radio, or Select Fields

Configuration

1. Purpose: These fields allow you to use Font Awesome. Not every scenario requires uploading custom icons or graphics directly to your site. A very simple and efficient way to choose an icon is by leveraging the Font Awesome library, which is largely free and widely supported in Elementor.
2. Field Configuration in ACF:
   • For Text Fields: The user manually enters the Font Awesome class (e.g., fas fa-user).
   • For Radio or Select Fields: Define the available options in ACF:
     • Value: The Font Awesome class (e.g., fas fa-user / fab fa-facebook).
     • Label: A human-readable name (e.g., User / Facebook).
   • Set the return format to Value. Avoid Label, as it will not provide the required class.
   • ensure that the field does not return a multiselect format, as only a single value is supported for icons.

How to Choose the Right Icon

1. Visit the Font Awesome website.
2. Search for the desired icon (e.g., “user”).
3. Click on the icon to reveal the icon code, such as <i class=”fa-solid fa-user”></i>. This code contains the information you need to use the icon in your website.
4. Copy only the class name (e.g., fa-solid fa-user) from within the class attribute to the ACF field. Do not include the opening <i> or closing </i> tags, as they are not needed and will cause issues.
   • Prefixes:
     • fa-solid: Solid style (default for most icons).
     • fa-regular: Regular style (outline version).
     • fa-light: Light style (requires a Pro license).
     • fa-thin: Thin style (requires a Pro license).
     • fa-brands: Brand icons (e.g., fab fa-facebook).
5. Verify that the selected icon is included in the version of Font Awesome available in Elementor.
   • Some icons are Pro-only and require a Font Awesome Pro subscription.

Common Issues

• Typographical Errors: A single typo will prevent the icon from displaying.
• Unavailable Icons: Ensure the icon is available in your Elementor installation.

General Best Practices

1. Consistency: Use a single field type across the repeater to avoid confusion.
2. Validation: Ensure that the input values are valid Font Awesome classes or SVG files.
3. Preview: Test your repeater to verify that all icons display correctly.
4. Documentation: Provide instructions for users who will configure the repeater.

Troubleshooting

• Icon Not Displaying:
  • Verify the class name for text fields.
  • Check that the SVG file is valid.
• Missing Icons:
  • Some Font Awesome icons require a Pro subscription.
  • Confirm that the icon library is supported by Elementor.
• Return Format Issues:

  • Ensure Value is selected for Radio or Select fields by setting the return format explicitly in ACF. This ensures the field returns the required Font Awesome class (e.g., fas fa-user) instead of a human-readable label, which cannot be used to display icons.

By following these guidelines, you can effectively manage and display icons in Elementor widgets that you choose to connect to a repeater, enhancing both the functionality and the visual appeal of your website.