Flipbox icons have widget-specific controls. In Ultimate Flipbox and Story Flipbox, the content controls include Enable Icon or item-level icon settings and an Icon Type choice. The registered choices are Icon, Icon Image, and Icon Text. Styling controls include icon color and size for the relevant front or back side.
Ultimate Flipbox → Content → Icon Controls
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Content tab.
- Open Flipbox Content.
- Select the Front content settings.
- Locate Enable Icon.
- Turn on Enable Icon if it is off.
- Locate Icon Type.
- Choose Icon, Icon Image, or Icon Text.
- If Icon Type is Icon, choose an icon from the icon picker.
- If Icon Type is Icon Image, select the image control.
- Choose an image for the icon.
- If Icon Type is Icon Text, enter the text in Icon Text.
- Select the Back content settings.
- Configure the back-side icon if needed.
- Click Update to save the page.
Ultimate Flipbox → Style → Icon Style
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Icon Style.
- Select the Front icon settings.
- Adjust Icon Color.
- Adjust Icon Size.
- Adjust Icon Padding where available.
- Adjust Icon Margin where available.
- Select the Back icon settings when styling the reverse-side icon.
- Preview the icon.
- Click Update to save the page.
Story Flipbox → Content → Item Icon
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Content tab.
- Open Flipbox Items.
- Select the relevant Flipbox Item.
- Locate Icon Type.
- Choose Icon, Icon Image, or Icon Text, according to the options shown.
- Configure the control that appears for the selected icon type.
- Repeat for another item only if needed.
- Click Update to save the page.
Story Flipbox → Style → Icon Style
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Style tab.
- Open Icon Style.
- Adjust Icon Color.
- Adjust Icon Size.
- Adjust Icon Padding where available.
- Adjust Icon Margin where available.
- Adjust Icon Border where available.
- Preview the item.
- Click Update to save the page.
Post Flipbox → Style → Icon Style
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Icon Style.
- Adjust Icon Color.
- Adjust Icon Size.
- Use the element spacing or border controls only when they are exposed for this widget.
- The reviewed version 2.1.7 Post Flipbox source does not expose the same Icon Type selector as Ultimate Flipbox and Story Flipbox.
- Preview the icon.
- Click Update to save the page.
Check Icon Appearance and Click Update
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Check the icon against the card background.
- Check the front-side icon if enabled.
- Check the back-side icon if enabled.
- Click Update to save the page.
Choose an icon type
- Select the widget or Story Flipbox item you want to edit.
- Open the icon controls for the front or back side. In Ultimate Flipbox, check Enable Icon if that switch is available and off.
- Choose Icon to use the icon picker, Icon Image to use an image, or Icon Text to display text, where those options are exposed.
- Choose or upload the required icon asset and enter text only for the matching icon type.
Style and verify the icon
Open the icon style controls and adjust Icon Color and Icon Size where available. Some Story Flipbox controls also expose icon background, padding, border, and border radius. Review each side separately and ensure the icon remains visible over the background.
For a consistent card surface, see Style Flipbox Backgrounds. For the border around an icon or card, see Customize Flipbox Borders.
Screenshot to add: the icon type choices and a related icon color or size control. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.