How to put icon inside an input box - html

Question

Can anyone help me to put the tick icon inside the input box at right corner?
Also is it possible to display a 'Field Saved' message along with the tick icon?
Update:
What if form contains multiple input in single row, then how to show icon inside the input boxes?
Fiddle: https://jsfiddle.net/sanadqazi/5Len09ad/1/
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="row">
<div class="col-8">
<div class="test">
<input type="text">
<i class="fas fa-check inp"></i>
</div>
</div>
<div class="col-4">
<div class="test">
<input type="text">
<i class="fas fa-check inp"></i>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

A little bit of CSS should do the trick here.
Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.
CSS:
.test {
position: relative;
}
.test .fas.fa-check {
position: absolute;
top: 0;
right: 0;
}
UPDATE
If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.

Answer 2

.col-8,
.col-4 {
position: relative;
}
.input-container {
border: solid 1px #000;
border-radius: 2px;
position: absolute;
display: flex;
align-items: center;
padding: 4px;
gap: 4px;
}
.input-container i {
display: flex;
justify-content: center;
align-items: center;
}
.inp {
height: 36px;
line-height: 36px;
}
input[type="text"] {
/* padding-right: 100px; */
border: none;
outline: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="row">
<div class="col-8">
<label class="input-container">
<input type="text">
<i class="fas fa-check inp"></i>
<!-- <span>Field Saved</span> -->
</label>
</div>
<div class="col-4">
<label class="input-container">
<input type="text">
<i class="fas fa-check inp"></i>
<!-- <span>Field Saved</span> -->
</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
You can add a container element to your textbox and tick icon. Then, you can remove all the styles of the textbox and put similar styles to the container to make it look like the container itself is a textbox. This way, you can make it look like the icon (and the Field Saved text) inside the textbox.