doe.2211 doe.2211 - 1 month ago 9
CSS Question

ionicons inside bootstrap 4 input

i would like to build an input search field with bootstrap alpha 4, but instead of glyphicon icons or font awesom, i'm using ionicons, i prefer them more.

the problem is that the icon is allways under the input field, how could i get it inside of the input field.

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


enter image description here

Answer

Their u go

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

You dont have to set them specif on relative, inputs are most set to relative.

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