Как вставить иконку в input

843

31 августа 2017, 17:32

Видела подобный вопрос, но ответ дали как вставить изображение. А что на счет иконки, например, с Font Awesome? Вот как здесь: http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44.jpg

Answer 1

Font Awesome можно использовать например так:

input { 
  height: 20px; 
} 
 
i.fa { 
  width: 26px; 
  height: 26px; 
  line-height: 26px; 
  text-align: center; 
  margin-right: -26px; 
  position: relative; 
  z-index: 1; 
  float: left; 
} 
 
i.fa + input { 
  padding-left: 26px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div> 
  <i class="fa fa-address-book-o" aria-hidden="true"></i> 
  <input type="text"> 
</div>

Answer 2

Есть два общих варианта решения данной задачи - использовать некий фреймворк для данной цели и использовать чистый css. Я бы вам советовал пойти по второму пути, так как, скорее всего, если у вас возникают подобные вопросы, вам намного проще в итоге будет использовать уже некие готовые стандартные решения для дизайна, при необходимости изменяемые и / или дополняемые вами, чем писать все с нуля.

Если коротко, то ответ на ваш вопрос гуглится по примерно такому запросу: "bootstrap add icon to input". Если длиннее, то вот первый попавшийся и крайне детальный ответ на английском SO.

При этом, если вы столкнулись с версткой, где используются вещи вроде <i class="fa fa-envelope-o" aria-hidden="true"></i> (насколько я вижу из вашего комментария к другому вопросу), вам наверняка нужен именно Bootstrap - именно в нем подобными стилями привязываются конкретные символы из шрифтов вроде Font Awesome к нужным элементам страницы.

Answer 3

Можно использовать пару вещей, чтобы сделать это. Во-первых, использовать фоновое изображение для элемента . Затем, чтобы отодвинуть от края, нужно использовать padding-left

Другими словами, нужно использовать два CSS правила:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Взято с английского stackoverflow

UPD для Font awesome

Вот здесь описано как пользоваться иконками, и есть пример для формы, вот он:

<div class="input-group margin-bottom-sm"> 
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> 
  <input class="form-control" type="text" placeholder="Email address"> 
</div> 
<div class="input-group"> 
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> 
  <input class="form-control" type="password" placeholder="Password"> 
</div>

Answer 4

    @import "http://fonts.fontstorage.com/import/adventpro.css"; 
 
    * { 
        margin: 0; 
        padding: 0; 
    } 
 
 
    html, 
    body { 
        width: 100%; 
        height: 100%; 
        background-color: #065b79; 
        overflow: auto; 
    } 
    input{ 
    	position: absolute; 
    	top: 100px; 
    	left: 100px; 
    	height: 50px; 
    	width: 400px; 
    	padding-left:55px; 
    	background-color: transparent; 
    	background-image: url(https://png.icons8.com/windows/50/0063B1/edit); 
    	background-repeat: no-repeat; 
    	outline: none; 
    	color: #fff; 
    	text-align: left; 
    	font-size: 35px; 
    	font-family: 'Advent'; 
    	border: 0; 
    	border-bottom: .1px solid #fff;  
    } 
 input::placeholder {color:#fff;text-align: center;}