How to add icons before the placeholder

Question

I am working on the front of a login and I am wanting to insert the contact icons for the email field and the lock for the password. I want to insert before the message of placeholder. I am not using Bootstrap. I would have been able to do this with the selector ::before? and would also use something analogous to :nth-child() when passing the address of these icons?

body {
  margin: 0px;
  padding: 0px;
}

.login {
  margin: auto;
  width: 350px;
  height: 540px;
  margin-top: 50px;
  background-color: #cc252f;
  position: relative;
}

.fields {
  margin: auto;
  width: 240px;
  height: 100px;
}

.fields input {
  font-size: 1em;
  width: 98%;
  height: 46%;
  padding-left: 5px;
  margin-top: 2px;
  border-radius: 5px;
  border: 0px;
}

<div class="login">
  <div class="fields">
    <input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"><br>
    <input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha">
  </div>
</div>

Answer 1

A nice way is to use an image as Sprite (it can be a PNG with transparent background, a GIF or a JPG with white background). Then just add the image as background input by positioning each Sprite icon in the input.

In the example below I used the image below with PNG format, with dimensions of 33x100 pixels:

The image must be vertical and have an even height where each icon will be centered vertically in each half, that is, 50px.

In CSS you position each icon on the X and Y axes. In the case of the X axis (horizontal) I have given a 10px spacing not to paste on the edge of the input, and in the password input I have positioned -40px (half) so that the background rises showing the second icon. And I also used a padding-left in the inputs so that the text is not above the icons, compensating for the width of the icons.

It is also necessary to adjust the width of inputs to deduct the padding-left applied. For this you use the calc, subtracting the width of the inputs by padding-left applied:

width: calc(98% - 48px);

Analyzing the CSS you will understand how it works and the result:

body {
  margin: 0px;
  padding: 0px;
}

.login {
  margin: auto;
  width: 350px;
  height: 540px;
  margin-top: 50px;
  background-color: #cc252f;
  position: relative;
}

.fields {
  margin: auto;
  width: 240px;
  height: 100px;
}

.fields input {
  font-size: 1em;
  width: calc(98% - 48px);
  height: 46%;
  padding-left: 48px;
  margin-top: 2px;
  border-radius: 5px;
  border: 0px;
}

#email, #pwd{
   background: url(https://i.stack.imgur.com/VqyJ8.png) #fff no-repeat;
}

#email{
   background-position: 10px 12px;
}

#pwd{
   background-position: 10px -40px;
}

<div class="login">
  <div class="fields">
    <input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"><br>
    <input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha">
  </div>
</div>

Answer 2

I made an icon option using Fontawesome in the pseudo element of the label not input, because the input does not accept pseudo element as you can see in the link I commented above. Here you can check the other icons https://fontawesome.com/

You can use nth-child(3), but it has to be 3 pq has an element BR between a input and another. But note that only in the content="" of ::after I changed from one icon to the other

Follow the image code above:

body {
	margin: 0px;
	padding: 0px;
}

.login {
	margin: auto;
	width: 350px;
	height: 540px;
	margin-top: 50px;
	background-color: #cc252f;
	position: relative;
}

.fields {
	margin: auto;
	width: 240px;
	height: 100px;
}

.fields input {
	font-size: 1em;
	width: 98%;
	height: 46%;
	margin-top: 2px;
	border-radius: 5px;
	border: 0px;
	box-sizing: border-box;
	padding-left: 30px;
}
label {
	position: relative;
}
label::after {
	font-family: FontAwesome;
	float: left;
	margin-left: -1.5em;
	content: "\f007";
	color: #000;

	left: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
label:nth-child(3)::after {
	content: "\f13e";
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="login">
	<div class="fields">
		<label><input type="email" maxlength="30" name="email" id="email" placeholder="e-mail"></label>
		<br>
		<label><input type="password" maxlength="16" name="pwd" id="pwd" placeholder="senha"></label>
	</div>
</div>