Font Awesome HTML

248

13 сентября 2018, 23:50

Всем привет, помогите, пожалуйста. Есть input[type='submit']

<form action=""> 
  <div> 
    <input type="search" placeholder="Поиск мероприятия"> 
    <input type="submit" value=""> 
  </div> 
</form>

Сейчас он пустой value='q'. Как сделать чтобы на его месте была либо png картинка (лупа) либо символ из Font-Awesome (тоже лупа) Заранее спасибо

Answer 1

Задаем класс необходимой fontawesome иконки, в качестве value задаете юникод символа :

input { 
  display: inline-block; 
  vertical-align: middle; 
  height: 40px; 
} 
 
input[type="submit"]{ 
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
  width: 40px; 
  height: 40px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
   
<form action=""> 
  <div> 
    <input type="search" placeholder="Поиск мероприятия"> 
    <input type="submit" value="&#xf002;" class="fa fa-search" aria-hidden="true"> 
  </div> 
</form>

Answer 2

Как сделать чтобы на его месте была либо png картинка (лупа) либо символ из Font-Awesome (тоже лупа)

Вот так на пример:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> 
<form action=""> 
  <div> 
    <input type="search" placeholder="Поиск мероприятия"> 
    <!-------- Тот же эффект, что у input[type="submit"] --------> 
    <button type="submit"> 
       <i class="fas fa-search"></i> 
    </button> 
  </div> 
</form>