How to insert an icon in input [duplicate]

This question has already been answered here: How do I insert a font icon in input? (3 responses) Closed 3 years ago.

I saw a similar question, but the answer was given how to insert an image. And what about the icon, for example, with Font Awesome? Here's how it is here: http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44.jpg

Author: Bipa, 2017-08-30
Source

4 answers

Font Awesome can be used like this:

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>
 5
Author: Artem Gorlachev, 2017-08-30 11:06:57 

    @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;}
 <input type="text" placeholder="FiFa">
 2
Author: Air, 2017-08-30 12:10:24

There are two general solutions to this problem - use a framework for this purpose and use a pure css. I would advise you to go the second way, since, most likely, if you have such questions, it will be much easier for you to end up using some ready-made standard design solutions, if necessary, modified and / or supplemented by you, than to write everything from scratch.

In short, the answer to your question is Googled for something like this query: "bootstrap add icon to input". If it is longer, then here is the first and extremely detailed answer in English SO.

At the same time, if you are faced with a layout where things like <i class="fa fa-envelope-o" aria-hidden="true"></i> are used (as far as I can see from your comment to another question), you probably need Bootstrap - it is in it that specific characters from fonts like Font Awesome are bound to the necessary page elements with similar styles.

 0
Author: Stanislav Belichenko, 2017-08-30 11:05:31

You can use a couple of things to do this. First, use a background image for the element . Then, to move it away from the edge, use padding-left

In other words, you need to use two CSS rules:

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

Taken from English stackoverflow

UPD for Font awesome

Here describes how to use icons, and there is an example for the form, here it is: 

<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>
 0
Author: Daniil Dubchenko, 2017-08-30 11:05:51