ionicons in bootstrap 4入力

Question

私はbootstrap alpha 4で入力検索フィールドを作成したいのですが、グリフコンアイコンやフォントawesomではなく、ioniconsを使用しています。

問題はアイコンが入力フィールドの下にあることです。どのように入力フィールドの中に入れることができますか。

<div class="input-group"> 
    <input type="search" class="form-control"> 
    <span> 
     <i class="ion-ios-search-strong pulse-icons "></i> 
    </span> 
    </div> 

Answer 1

彼らのuは相対的にそれらをspecif設定する必要があなたはいけない

<div class="col-xs-12"> 
    <div class="input-group filter-search"> 
     <input type="search" class="form-control" placeholder="Filter nach Namen..."> 
     <span> 
     <i class="ion-ios-search-strong pulse-icons"></i> 
     </span> 
    </div> 
    </div> 

を行く、入力はほとんどの相対的に設定されています。

.input-group span { 
    position: absolute; 
    left: 0; 
    z-index: 2; 
} 

Answer 2

私はあなたのために働くと思う二つの方法があります。

簡単な方法は、<span>タグにposition: absoluteと入力し、入力フィールドに置きます。

.input-group { 
 
    position: relative; 
 
} 
 

 
.input-group span { 
 
    position: absolute; 
 
    left: 160px; 
 
    z-index: 2; 
 
    top: 2px; 
 
    cursor: pointer; 
 
}

<div class="input-group"> 
 
    <input type="search" class="form-control"> 
 
    <span> 
 
    <i class="ion-ios-search-strong pulse-icons">S</i> 
 
    </span> 
 
</div>