Since, the <input> is an empty element, we cannot place the icon HTML directly inside the input button like we do with the buttons created using the <button> element.
However, we can place the Glyphicon outside the input button and push it visually inside to create the effect that looks like the icon is placed inside the button itself using the CSS positioning techniques.
Let's try out the following example to understand how it basically works:
As you can see we've wrapped the Glyphicon and input button with a <span> element and applied the class .icon-input-btn on it. Doing that will automatically apply some styling on the enclosed icon and input button and force them make the necessary adjustments.
The jQuery code in the example above simply get the font-size and color CSS property values from the input button and apply it on the corresponding Glyphicons. It also adjust the top position of the Glyphicon to align it vertically in the middle for the extra small button.
Use the CSS
position
PropertySince, the
<input>
is an empty element, we cannot place the icon HTML directly inside the input button like we do with the buttons created using the<button>
element.However, we can place the Glyphicon outside the input button and push it visually inside to create the effect that looks like the icon is placed inside the button itself using the CSS positioning techniques.
Let's try out the following example to understand how it basically works:
As you can see we've wrapped the Glyphicon and input button with a <span> element and applied the class .icon-input-btn on it. Doing that will automatically apply some styling on the enclosed icon and input button and force them make the necessary adjustments.
The jQuery code in the example above simply get the font-size and color CSS property values from the input button and apply it on the corresponding Glyphicons. It also adjust the top position of the Glyphicon to align it vertically in the middle for the extra small button.
need an explanation for this answer? contact us directly to get an explanation for this answer