Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Creating the Bootstrap Input Buttons with Icons</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> .bs-example{ margin: 20px; } .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="bs-example"> <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>
