Add Icon to Input Submit Button - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Form Control

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Form Control

Description

Add Icon to Input Submit Button

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <title>Creating the Bootstrap Input Buttons with Glyphicons</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <style type="text/css">
    .icon-input-btn{
        display: inline-block;
        position: relative;
    }<!--   w  w w  .  j av a 2 s  . co  m-->
    .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-primary btn-lg" value="Search"></span> 
   <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-primary" value="Search"></span> 
   <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-primary btn-sm" value="Search"></span> 
   <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-primary btn-xs" value="Search"></span> 
   <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>

Related Tutorials