{"id":27774,"date":"2023-09-08T12:57:32","date_gmt":"2023-09-08T07:57:32","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=27774"},"modified":"2024-01-10T17:57:54","modified_gmt":"2024-01-10T12:57:54","slug":"rotate-the-icon-in-elementor-button-widget","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/rotate-the-icon-in-elementor-button-widget\/","title":{"rendered":"How to Rotate the Icon in Elementor Button Widget: Step-by-Step Guide"},"content":{"rendered":"\n

If you are using Elementor Pro<\/a> \/ Free to build your WordPress site, you probably appreciate the versatility and ease it brings to web design. One of the many customizable features to add and rotate icons in Elementor button widgets with custom CSS. <\/p>\n\n\n\n

This feature allows for a dynamic and modern design which could potentially enhance user engagement on your site. In this blog post, we will walk you through the steps to rotate an icon with custom CSS in an Elementor button widget.<\/p>\n\n\n\n

Rotate the Icon in the Elementor Button Widget<\/h2>\n\n\n\n

Rotating an icon in the Elementor button widget involves a few steps that you can follow to achieve the desired outcome. Here is a step-by-step guide to help you rotate an icon in the Elementor button widget with custom CSS:<\/p>\n\n\n\n

Step 1<\/strong>: Insert an icon in your Elementor Button widget.<\/p>\n\n\n\n

Step 2:<\/strong> To rotate the icon, paste the CSS code in the “Custom CSS” section under the “Advanced” tab.<\/p>\n\n\n\n

selector i {\n  transform: rotate(45deg);\n}\n<\/code><\/pre>\n\n\n\n
This code will rotate the icon by 45 degrees. You can change “45” to any other value to control the rotation angle.<\/p>\n\n\n\n
Note:<\/strong> The CSS code selector i<\/code> is used to select the icon element inside the button widget. The transform: rotate(45deg);<\/code> is used to rotate the icon 45 degrees. You can change the value to rotate the icon to a different degree.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Learning how to rotate icons in Elementor button widgets can add a unique touch to your website. It not only makes your site visually appealing but also enhances the user experience by adding a dynamic element to the buttons.<\/p>\n\n\n\n
Feel free to experiment with different degrees of rotation to see what works best for your design. Happy website building!<\/p>\n\n\n
\n
\n
\n
How do I rotate an icon in WordPress Elementor?<\/strong><\/h3>\n
\n\n
In WordPress Elementor, apply a CSS transform (transform: rotate(45deg);<\/code>) in the “Custom CSS” section found in the “Advanced” tab of the widget settings panel.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I rotate an icon On click?<\/strong><\/h3>\n
\n\n
Implement a jQuery function: $('#icon').click(function(){ $(this).css('transform', 'rotate(45deg)'); });<\/code>, to rotate an icon on click.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I customize my Elementor Button?<\/h3>\n
\n\n
Adjust properties like text, icon, and color through the ‘Content’ and ‘Style’ tabs in the Elementor editor to personalize your button.<\/p>\n\n<\/div>\n<\/div>\n
\n
How do I rotate an icon in CSS?<\/strong><\/h3>\n
\n\n
Utilize the CSS rule .icon { transform: rotate(45deg); }<\/code> to rotate an icon, adjusting “45” to your chosen rotation degree.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
If you are using Elementor Pro<\/a> \/ Free to build…<\/p>\n","protected":false},"author":2,"featured_media":27781,"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":[2],"tags":[309,308],"class_list":["post-27774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-css-transformation","tag-widget-customization"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/27774","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=27774"}],"version-history":[{"count":0,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/27774\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/27781"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=27774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=27774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=27774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}