CODEWITHSUNDEEP
htmltwitter-bootstrap
Pradeep Gowda
Pradeep Gowda

Reputation: 45

How to glyphicon on left side of textbox

This is output i am getting but i need glyphicon at left side In this code I am getting glyphicon on right side of input box how can I have the glyphicon on left side.

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">

          <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
          <i class="glyphicon glyphicon-lock form-control-feedback"></i>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Views: 1690

Answers (4)

Selvam Elumalai
Selvam Elumalai

Reputation: 693

without additional custom CSS. Solution with bootstrap CSS

  <div class="panel-body">
 <div class="row">
<div class="col-lg-12">
  <form id="signin-form" action="" method="post" role="form" style="display: block;">
    <div class="form-group ">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"> <i class="glyphicon glyphicon-user"></i></span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
      </div>
    </div>
  </form>
</div>

Upvotes: 1

bhansa
bhansa

Reputation: 7534

style.css:

.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

HTML Code: 

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">
           <div class="inner-addon left-addon">
      <i class="glyphicon glyphicon-lock"></i>      
      <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
    </div>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

glyphicon has a css property right:0 which is why it is floating right. Add left:0 to make it float left

.form-group i.glyphicon {
  left: 13px; /*Added left 10px to align it to `textbox`*/
}
input[type="text"] {
  padding-left: 25px; /*let the text inside textbox start bit away from icon*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">
          <i class="glyphicon glyphicon-user form-control-feedback"></i>
          <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 0

SESN
SESN

Reputation: 1283

Add the class pull-left to glyphicon in twitter bootstrap. Or Add float: left; to glyphicon class

Upvotes: 0

Related Questions