{"id":27646,"date":"2024-09-14T13:03:53","date_gmt":"2024-09-14T08:03:53","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=27646"},"modified":"2024-09-14T13:03:54","modified_gmt":"2024-09-14T08:03:54","slug":"move-icon-to-the-right-on-elementor-icon-list-widget","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/move-icon-to-the-right-on-elementor-icon-list-widget\/","title":{"rendered":"How to Move Icon to the Right on Elementor Icon List Widget: A Step-by-step Guide"},"content":{"rendered":"\n

Are you want to move icon to the right on Elementor icon list widget in Elementor?<\/p>\n\n\n\n

Check out our Elementor mega menu<\/a> templates<\/p>\n\n\n\n

Customization is vital to creating websites that stand out. Elementor Pro<\/a> \/ Free, a widely popular WordPress plugin, has become a go-to choice for web designers looking to craft visually stunning and interactive web pages. One of the intriguing challenges many face is aligning icons to the right within the Elementor Icon List Widget<\/p>\n\n\n\n

Click Here: How to Increase icon size within toggle widget Elementor<\/a><\/p>\n\n\n\n

In this comprehensive guide, we’ll delve into the step-by-step process of moving icons to the right on the Elementor Icon List Widget. <\/p>\n\n\n\n

Move the Icon List Widget to the right on Elementor<\/h2>\n\n\n\n

Step 1:<\/strong> Open the Elementor Editor.<\/p>\n\n\n\n

Step 2:<\/strong> Drag icon list widget and style icon according to need.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Noted: <\/strong>Below step 3 for Elementor Pro<\/a> Users. But if you are using Elementor free then check step 4 to achieve this.<\/p>\n\n\n\n

Step 3: <\/strong>Now go to advanced > Custom CSS and paste the below CSS code to move the icon right of the text.<\/p>\n\n\n\n

selector .elementor-icon-list-icon{\n    order:1;\n    margin-left: 5px;\n}<\/code><\/pre>\n\n\n\n
\"Elementor<\/figure>\n\n\n\n
Step 4:<\/strong>  Go to Appearance > Customize > Additional CSS. Paste the below CSS code.<\/p>\n\n\n\n
.elementor-icon-list-icon{\n    order:1;\n    margin-left: 5px;\n}<\/code><\/pre>\n\n\n\n
\"wordpress<\/figure>\n\n\n\n
Step 5:<\/strong> Hit publish. The job is done.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In conclusion, understanding and utilizing the Elementor icon and icon list widget to realign icons enhances the visual and functional aspects of your webpage. These simple yet effective modifications offer a refreshing look and facilitate a seamless user experience. Don’t hesitate to experiment with different custom CSS codes to perfect your website’s layout and design, making it a true embodiment of your brand’s essence.<\/p>\n\n\n\n
FAQs to Move Icon to the Right on Elementor Icon List Widget<\/h2>\n\n\n
\n
\n
\n
How do I align icons to the top of the icon list in Elementor?<\/strong><\/h3>\n
\n\n
To align icons at the top, navigate to the Elementor icon list widget settings and look for the “Vertical Align” option. Set it to “Top” to ensure icons align with the top of the list.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I align widgets in Elementor?<\/strong><\/h3>\n
\n\n
Aligning widgets in Elementor is straightforward. Simply click and hold the widget you want to move, then drag it to the desired position within your page or section.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I move a widget in Elementor?<\/strong><\/h3>\n
\n\n
To move a widget, click and hold the widget in the Elementor editor, and then drag it to the location where you want it to appear within your layout.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I use the icon list in Elementor?<\/strong><\/h3>\n
\n\n
To utilize the icon list in Elementor, first add it to your page via the Elementor editor. Customize it by adding icons and text, and use the widget settings to arrange them as needed to create a visually appealing list.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
Are you want to move icon to the right on…<\/p>\n","protected":false},"author":2,"featured_media":27662,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[4,2],"tags":[306,233],"class_list":["post-27646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-wordpress","tag-elementor-css","tag-elementor-guide"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/27646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=27646"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/27646\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/27662"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=27646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=27646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=27646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}