BugWP logo BugWP
Back to Community
Home / Community / Plugin → Unlimited elements for elementor

Troubleshooting Common Icon and Styling Issues in Unlimited Elements For Elementor Widgets

21 threads Sep 16, 2025 Plugin → Unlimited elements for elementor

Content

Many users of the 'Unlimited Elements For Elementor' plugin encounter issues with icons and styling within its powerful widgets. From mysterious square backgrounds on slider arrows to icons that won't change color, these problems can be frustrating. This guide compiles the most common issues and their solutions based on community discussions.

Common Icon and Styling Problems

1. Unwanted Square Backgrounds on Navigation Arrows
A frequent issue, particularly with carousel and slider widgets, is the appearance of a square or boxy background behind navigation arrows, as seen in this community example.

2. Inability to Change Icon Styles or Colors
Users often report that custom SVG icons or Font Awesome icons do not change color when used within specific widgets like tabs or remote content, even though they work fine elsewhere.

3. Limited Icon Customization Options
Some widgets, like the Product List or certain rating widgets, may not offer built-in options to change the icon type (e.g., from a star outline to a filled star) or to use completely different icons like hearts or thumbs up.

4. Image Cropping in Sliders
A slider may appear correctly in the Elementor editor but display cropped images in the live preview or on the front end, cutting off important parts of the image.

Why These Issues Happen

These problems typically stem from a few key areas:

  • Default Widget Styles: Widgets often come with pre-defined CSS styles for icons and navigation elements that may not be immediately visible in the settings.
  • SVG Compatibility: SVG icons can behave differently than icon fonts. Their colors are sometimes controlled by internal SVG code or specific CSS properties like fill and stroke, which may not be targeted by the widget's styling options.
  • Feature Roadmap: Some highly specific customization options, like changing a rating icon's type, may not yet be part of the widget's core feature set if there hasn't been significant user demand for it.
  • Z-index and Positioning Conflicts: Overlay issues, where a menu or popup appears behind other elements, are often caused by conflicting z-index values from other plugins or the theme.

Solutions and Workarounds

For Square Backgrounds on Arrows:
The 'Unlimited Elements For Elementor' team has added more icon options to its widgets. Try deleting the widget from your page and re-adding it from the Elementor panel. This ensures you have the latest version of the widget with updated styling options. You can then often find new settings to choose a different arrow style from an icon library.

For SVG Icon Color Issues:
If your SVG icon's color isn't changing, you likely need to use custom CSS. First, inspect the element using your browser's developer tools to find the correct CSS selector. Then, use the fill property for color instead of color. For example: 

.your-widget-class svg path {
    fill: #c33;
}
Add this code in the 'Advanced' or 'Custom CSS' tab of the widget or in the Customizer.

For Limited Icon Customization:
For widgets that don't offer a specific icon change setting, you may need to use a workaround. If the widget outputs an HTML element, you can sometimes use custom JavaScript to find and replace the icon class names (e.g., from far fa-star to fa fa-star). Alternatively, custom CSS can be used to hide the default icon and inject a new one using the ::before pseudo-element and the content property with a unicode value.

For Image Cropping in Sliders:
This is usually a CSS object-fit issue. Inspect the slider image in your browser. You will likely need to add custom CSS to control how the image fits within its container. A common solution is: 

.your-slider-image-selector {
    object-fit: contain;
}
Try using contain to fit the entire image or cover to fill the area (which may crop it). Adjust the height and width properties as needed.

For Z-index Conflicts:
If a menu or overlay is appearing behind other content, you must give it a higher z-index value than the elements covering it. Find the selector for the hidden element (e.g., .flyout-content) and the element covering it. Then, apply a new z-index: 

.your-menu-selector {
    z-index: 9999 !important;
}
Use the !important rule sparingly and only if necessary to override other styles.

When to Seek Further Help

If these solutions do not resolve your issue, the problem may be more complex or specific to your website's environment. The community suggests that for deeper, widget-specific troubleshooting, detailing the issue on the 'Unlimited Elements For Elementor' official channel is the best course of action. Be prepared to provide a link to the page where the issue is visible, as this is the most effective way for others to diagnose styling and functionality problems.

Related Support Threads Support