Menu
How do I put an icon inside a form's input element?
Live version at: Tidal Force theme
904
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.)
The font-awesome icon can be placed by using the fa prefix before the icon's name. Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons.
No, you cannot have any element contained within an <input> element. It is an empty (void) element, and the closing tag must be ommitted. Thus you cannot have any element contained within it.
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.
In other words, they have these two CSS rules:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
The CSS solutions posted by others are the best way to accomplish this.
If that should give you any problems (read IE6), you can also use a borderless input inside of a div.
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
Not as "clean", but should work on older browsers.
70
A solution without background-images:
.icon {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}<input type="text" class="icon" value placeholder="Search">Or for right to left icon
.icon-rtl {
padding-right: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
background-size: 20px;
}<input type="text" class="icon-rtl" value placeholder="Search">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
