I need to place icons within the inputs for creating a new user. It's probably a really easy task for someone who knows their way around front end code. However I don't. Here is the wireframe and then I show my code.
As you can see. There are icons on the left side of the inputs. Right now I have the SVG's in my directory and ready to go I just need to know how to place them within the input. Here is the code for the form
<label clas="name-label"> <%= f.text_field :name, placeholder: "Name", class: "form-labels" %> </label> <label class="email-label"> <%= f.text_field :email, placeholder: "Email", class: "form-labels" %> </label>
So I have the placeholder with a string which currently just printing that string. I need to put the icons within that I think? Here is the css I have for the icons.
.icon-email { background-image: image-url('email-field.svg'); } .icon-name { background-image: image-url('name-field.svg'); }
Is there a way I can place these classes within the place holder?
In HTML, icons are added with the <i> tag. For it to be added inside the input elements, it must be added between the closing and opening tags of the elements in which you want the icon to be displayed.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
The <input type="image"> defines an image as a submit button. The path to the image is specified in the src attribute.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
You can add a pseudo element in the <label>
tag, and use some position
and padding
tricks for the visual. Using a svg for background is just the same as using an image.
label { position: relative; } label:before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; } input { padding: 10px 30px; }
<label> <input type="text" placeholder="Search"> </label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With