Add Icons To Your Elementor Form Fields With CSS

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
WhatsApp

Font Awesome

CSS Code

				
					/*placeholder spacing*/
selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{
    padding-left: 50px;
}

/*Icon box settings*/
selector form.elementor-form .elementor-field-group-email::after, .elementor-field-group-name::after, .elementor-field-group-phone::after, .elementor-field-group-message::after {
    position: absolute;
    left: 5px;
    top: 28px;
    bottom: 0px;
    width: 40px;
    height: 40px;
    background: #000;
    content: "";
    z-index: 99;
}

/*Icon size & position settings*/
selector form.elementor-form .elementor-field-group-email::before, .elementor-field-group-name::before, .elementor-field-group-phone::before, .elementor-field-group-message::before  {
    position: absolute;
    left: 16px;
    top: 34px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    color: #fff;
    z-index: 999;
    font-size: 17px;
}

/*Name field*/
selector .elementor-field-group-name::before{
    content: "\f007"
}

/*Email field*/
selector form.elementor-form .elementor-field-group-email::before{
   content: "\f0e0";  
}


/*Phone field*/
selector .elementor-field-group-phone::before{
    content: "\f095"
}

/*Message field*/
selector .elementor-field-group-message::before{
    content: "\f27a"
}




				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

How To Create A Mobile App Menu On Elementor

https://youtu.be/7iJz3km-nwM Create Your Glass Effect Here: glassmorphism.com Mobile Section /*Mobile section*/ selector{ position: fixed; width: 100%; bottom: 0px; background: rgba( 0, 0,

Create A Glass Flip Box On Elementor With CSS

https://youtu.be/uTF3vlRlhqU Create Your Glass Effect Here: glassmorphism.com Front Side .elementor-flip-box__front{ background: rgba( 255, 255, 255, 0.20 ); backdrop-filter: blur( 3.0px ); -webkit-backdrop-filter:

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.