Как глификон на левой стороне текстового поля

Question

This is output i am getting but i need glyphicon at left side В этом коде я получаю glyphicon с правой стороны от input box Как я могу получить glyphicon с левой стороны.

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

Answer 1

без дополнительного пользовательского CSS. Решение с начальной загрузкой 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> 

Answer 2

Добавьте класс pull-left к glyphicon в Twitter Bootstrap. Или Добавить float: left; в glyphicon класс

Answer 3

glyphicon имеет css свойство right:0, поэтому он плавает right. Добавить left:0, чтобы сделать его плавать 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>

Answer 4

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 код:

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