Insert logo in input - html

Question

am trying to create a field of research. I want to add a logo in the input bar.
Here is my code:
.display-new-chat-window {
.new-chat-window {
display: block;
text-align: center;
z-index: 2;
input:focus {
outline-color: $blue;
}
.new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
margin-top: 10px;
padding-left: 15px;
width: 200px;
z-index: 1;
}
}
}
<div class="new-chat-window">
<i class="fa fa-search"></i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>

Answer 1

Probably something like this, where L is the logo:
.new-chat-window {
position: relative;
width: 200px;
display: block;
margin: 10px auto;
text-align: center;
z-index: 2;
}
.new-chat-window .fa {
position: absolute;
top: 7px;
left: 10px;
font-weight: bold;
font-style: normal;
}
input:focus {
outline-color: $blue;
}
.new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
padding-left: 30px;
width: 100%;
z-index: 1;
}
<div class="new-chat-window">
<i class="fa fa-search">L</i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>

Answer 2

You can accomplish this using the background property:
input {
background: url(https://path.to/image);
}
.display-new-chat-window .new-chat-window {
display: block;
text-align: center;
z-index: 2;
}
.display-new-chat-window .new-chat-window input:focus {
outline-color: $blue;
}
.display-new-chat-window .new-chat-window-input {
border: 1px solid #ccc;
line-height: 30px;
margin-top: 10px;
padding-left: 15px;
width: 200px;
z-index: 1;
background: url(https://unsplash.it/15) no-repeat scroll 0 center;
}
<div class="display-new-chat-window">
<div class="new-chat-window">
<i class="fa fa-search"></i>
<input type="text" class="new-chat-window-input" id="new-chat-window-input" placeholder="Rechercher" />
</div>
</div>

Answer 3

Sorry If I misunderstand your point of your question
In this example, I use my own code
html
<input type="text" class="input-logo" placeholder="Paypal id/email">
css
.input-logo{
background-image:url(https://fx-
rate.net/images/favi_transfer/paypal.com.png);
background-position:right;
background-repeat:no-repeat;
padding-left:1px;
font-size: 16px;
width: 200px;
}
for your code, you add my input-logo class and you can style it from there.
Look at:
https://codepen.io/ronalto7777/pen/rzPjoR