bootstrap tutorial - How to add an icon to input submit button in Bootstrap - bootstrap examples - bootstrap templates - bootstrap 3
Answer: Use the CSS position Property
- 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. Check out the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Input Buttons with Glyphicons - Wikitechy</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.icon-input-btn{
display: inline-block;
position: relative;
}
.icon-input-btn input[type="submit"]{
padding-left: 2em;
}
.icon-input-btn .glyphicon{
display: inline-block;
position: absolute;
left: 0.65em;
top: 30%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".icon-input-btn").each(function(){
var btnFont = $(this).find(".btn").css("font-size");
var btnColor = $(this).find(".btn").css("color");
$(this).find(".glyphicon").css("font-size", btnFont);
$(this).find(".glyphicon").css("color", btnColor);
if($(this).find(".btn-xs").length){
$(this).find(".glyphicon").css("top", "24%");
}
});
});
</script>
</head>
<body>
<div>
<span class="icon-input-btn"><span class="glyphicon glyphicon-search"></span> <input type="submit" class="btn btn-default btn-lg" value="Search"></span>
<hr>
<span class="icon-input-btn"><span class="glyphicon glyphicon-search"></span> <input type="submit" class="btn btn-default" value="Search"></span>
<hr>
<span class="icon-input-btn"><span class="glyphicon glyphicon-search"></span> <input type="submit" class="btn btn-default btn-sm" value="Search"></span>
<hr>
<span class="icon-input-btn"><span class="glyphicon glyphicon-search"></span> <input type="submit" class="btn btn-default btn-xs" value="Search"></span>
</div>
</body>
</html>click below button to copy the code. By - Bootstrap tutorial - team
- 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.
- In the last line of the jQuery code we've adjusted the top position of the Glyphicon to align it vertically in the middle for the extra small button.
