Add icon to form filed

How To
1

I would like to add a icon to my form field next to my placeholder text. See image.

How can I make that happend?

Group
Group720×43 2.48 KB

2

Did you find a solution already? Is it possible with placeholder or only custom css?

3

You can give some padding to the form element and use a custom css background-image to display the icon like so:

%root% input[type="text"] {
  background-image: url('https://kennethauwers.be/wp-content/uploads/2024/10/logo-new_icon.svg');
  background-size: 2em;
  background-repeat: no-repeat;
  background-position-x: .5em; 
  background-position-y: center;
}

%root% input[type="email"] {
  background-image: url('https://kennethauwers.be/wp-content/uploads/2024/10/logo-new_icon.svg');
  background-size: 2em;
  background-repeat: no-repeat;
  background-position-x: .5em;
  background-position-y: center;
}

%root% textarea {
  background-image: url('https://kennethauwers.be/wp-content/uploads/2024/10/logo-new_icon.svg');
  background-size: 2em;
  background-repeat: no-repeat;
  background-position-x: .5em; 
  background-position-y: .75em;
}

This will give you the following result:

Screenshot 2024-10-25 at 19.31.00
Screenshot 2024-10-25 at 19.31.001436×838 18.9 KB

1 Like
4

Thanks for the instructions, but this only solves the text, email, etc. fields directly. So if I enter 2 text fields, the icon repeats. Is there a solution to give an icon to a specific field type?

5

@litolka can you provide an example of your preferred structure?

You don’t have to use the input selector, you can also use a specific ID or Class selector if you like.

Also if you only like the icon to be visible next to the placeholder you can use :placeholder-shown - CSS: Cascading Style Sheets | MDN in the custom CSS