なぜグリフィコンがブートストラップのテキストボックスに表示されないのですか？

Question

私は、ブートストラップで新たなんだと、その目的は、このコードを書くために、テキストボックスにGlyphiconsを使用したい：

<div class="inner-addon left-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
    <input type="text" class="form-control" /> 
</div> 

が、この私を見る：私はGlyphiconsを表示するにはどうすればよい

テキストボックスには入っていないのですか？ありがとう。

Answer 1

ちょうどあなたが本当にすることはできませんが、一種の偽それこのようなことができます

<div class="inner-addon left-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
    <input type="text" class="form-control" /> 
</div 

はCSS

/* enable absolute positioning */ 
.inner-addon { 
    position: relative; 
} 

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

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

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

Answer 2

...このコードをチェック：

<div style="border: 1px solid #DDD;"> 
<i class="glyphicon glyphicon-user" ></i> 
    <input style="border: none;"/> 
</div> 

短いです答えは、入力内の "value"属性の中に実際のアイコンを置くことができないため、その中にグリフコンを置くことができません。しかし、このように視覚的には、ユーザーに似ています。

Answer 3

​​position: absolute;と親divrelativeを設定します。

.inner-addon { 
 
    position: relative; 
 
    /* margin just for breathe from viewport */ 
 
    margin-top: 20px; 
 
} 
 

 
input { 
 
    /* give text some indent so it doesn't collapse with icon */ 
 
    text-indent: 18px; 
 
} 
 

 
.glyphicon.glyphicon-user { 
 
    position: absolute; 
 
    /* Adjust coordinates as desired */ 
 
    top: 10px; 
 
    left: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="inner-addon left-addon"> 
 
    <i class="glyphicon glyphicon-user"></i> 
 
    <input type="text" class="form-control" /> 
 
</div>