CSS Move Icon to Right of Input Field - html

Question

How do I move the magnifying glass to the right hand side in my input field?
Here's my Fiddle.
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>

Answer 1

You set left: 10px to an icon too. Set there more pixels from left side, or directly pixels from right.
.search .fa-search {left: 230px;}
http://jsfiddle.net/xhjLyf1k/1/
Setting right position instead of the left one (to prevent resizing of input field):
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
http://jsfiddle.net/xhjLyf1k/2/

Answer 2

you can also use a ::before pseudo-element within in the css itself to add a icon at right
.search::before {
position: absolute;
height: 3rem;
width: 3rem;
top: 50%;
transform: translate(-50%, -50%);
right: 0rem;
content: "";
background-image: url('../images/search.png');
background-size: contain;
}

Answer 3

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<div class='form-group'>
<label>Clave</label>
<div class="input-group input-group-sm" >
<input class='form-control' type="password">
<div class="input-group-btn">
<button type="submit" id="togglePassword" class="btn btn-default fa fa-eye"></button>
</div>
</div>
</div>
Bootstrap y Font Awesome
https://jsfiddle.net/jlujan/kgxo81fm/15/

Answer 4

Create a relative container span around the icon and input so the icon is always positioned relative to the input, rather than the div which is 100% width. Then you can move this component anywhere and have the icon work.
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
margin: 30px;
}
.search {
color: #aaa;
font-size: 16px;
}
.form-element {
position: relative;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
text-indent: 1em;
}
.search .fa-search {
position: absolute;
top: 0;
right: 10px;
bottom: 0;
}
<div class="search">
<span class="form-element">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</span>
</div>