WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to add an icon to input submit button in Bootstrap

Topic: Bootstrap / SassPrev|Next

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties