Ícone dentro de input usando Font Awesome?

Front-end
#1

Criei um campo pesquisa usando o ->font-awesome.min.css. O ícone search esta ficando abaixo do input

fiz assim ->input-group tem a position:relative e o button fica absolute. Mas, o ícone não ficou em cima.

Código

<li class="search">
         <div class="input-group">
           <input type="search" class="form-control" placeholder="Search...">
           <span class="input-group-btn">
          <button class="" type="button"><i class="fa fa-search"></i></button>
          </span>
        </div><!-- input-group -->
        </li>`

#menu li.search button{
    background:none;
    position:absolute;
    /*border:none;*/
    right: -10px;
    top: 7px;
    }

Fiz tudo certo. Mas esta com erro: ícone abaixo no input. Como resolver este erro?

1 curtida
#2

Olá Carlos, tudo certo?

Por acaso já tentou trabalhar com a propriedade z-index, do css?

Tenta assim:

.input-group-btn {
z-index: 1;
}

#menu li.search button {
z-index: 2;
}

Acho que assim já te ajudaria…

2 curtidas