How to add an icon to input submit button in Bootstrap

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.

Let's try out the following example to understand how it basically works:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating the Bootstrap Input Buttons with Icons</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
    .icon-input-btn{
        display: inline-block;
        position: relative;
    }
    .icon-input-btn input[type="submit"]{
        padding-left: 2em;
    }
    .icon-input-btn .fa{
        display: inline-block;
        position: absolute;
        left: 0.65em;
        top: 30%;
    }
</style>
<script>
$(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(".fa").css({'font-size': btnFont, 'color': btnColor});
	}); 
});
</script>
</head>
<body>
<div class="m-3">
	<span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-primary btn-lg" value="Search">
	</span>
    <span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-secondary btn-lg" value="Search">
	</span>
    <hr>
	<span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-primary" value="Search">
	</span>
    <span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-secondary" value="Search">
	</span>
    <hr> 
	<span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-primary btn-sm" value="Search">
	</span>
    <span class="icon-input-btn">
		<i class="fa fa-search"></i> 
		<input type="submit" class="btn btn-secondary btn-sm" value="Search">
	</span>
</div>
</body>
</html>

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.

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to add an icon to input submit button in Bootstrap

Answer: Use the CSS position Property

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use the CSS `position` Property