Search

How to Move Icon to the Right on Elementor Icon List Widget

The Elementor Icon List widget is popular for displaying lists with icons on your website. By default, the icons in this widget are aligned to the left of the text. However, you may sometimes want to move the icons to the right for better visual balance or to suit your design preferences. This tutorial will walk you through the steps to easily move the icons to the right on the Elementor Icon List widget. Let’s get started!

Steps to Move Icon to the Right on Elementor Icon List Widget

Step 1: Add or Edit the Icon List Widget

Go to your Elementor editor to create new content (page/post) or select the existing one. Afterward, add an Icon List widget to the canvas area or modify your existing widget. In this example, we will modify our Icon List widget.

Step 2: Add the Custom CSS

As you can see from the image above, once you add the Icon List widget, the icons in this widget are aligned to the left of the text. Next, we will add the simple CSS snippet to the widget to move the icons to the right of the text.

On the widget settings, navigate to the Advanced tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the Custom CSS input field.

selector .elementor-icon-list-icon{
    order:1;
    margin-left: 10px;
}

The Code Explanation:

By applying these CSS properties to the .elementor-icon-list-icon class, you are adjusting the positioning and spacing of the icon element within the Elementor Icon List widget. The order property determines its position relative to other elements, while the margin-left property controls the spacing on the left side of the icon.

Feel free to modify the value margin-left to achieve the desired visual effect for your Elementor Icon List widget.

Note: This CSS snippet also works on the Post Info Widget. You can copy and paste it into the Post Info Custom CSS input field to move the icons to the right on Post Info widget.

Icon List and Post Info widget after Custom CSS added.

That’s it. Once you add Custom CSS to your widget, your icons are moved to the right of the text on the Elementor Icon List and Post Info widget. Don’t forget to save your project or publish it if you want to.

The Bottom Line

This article shows how easily you can move the icons to the right on the Elementor Icon List and Post Info widget. Applying CSS code to the widgets lets you move the icons to the right of the text and achieve better visual effects to suit your web design. Experience with different CSS property values (margin-left) to fine-tune the positioning of the icons.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?