Boostrap glyphicon находится за пределами текстового поля

Question

Я пытаюсь получить глификон внутри поля ввода, но по какой-то причине он находится вне текстового поля.

<!-- Panel --> 
<div class="panel panel-default hidden-xs"> 
    <div class="row"> 
     <div class="col-sm-5 col-sm-offset-1"> 
      <form> 
       <p><strong>Enter your number and we'll text you a link</strong></p> 
       <label class="sr-only">Phone Number</label> 
       <input class="form-control phone-txt" type="text" placeholder="Phone Number"> 
       <button class="btn btn-submit" type="submit"> 
        <span class="glyphicon glyphicon-arrow-right"></span> 
       </button> 
      </form> 
     </div> 
     <div class="col-sm-5"> 
      <p><strong>Or visit an app store to download now!</strong></p> 
      <a class="btn btn-default btn-lg" href="#">iOS</a> 
      <a class="btn btn-default btn-lg" href="#">Android</a> 
     </div> 
    </div> 
</div><!-- End panel --> 

Answer 1

Похоже, у вас есть этот глификон, прикрепленный к кнопке. Вы могли бы попробовать что-то вроде этого ...

<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2"> 
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>