How can I add a Bootstrap Icon in a placeholder? - html

Question

I am trying to add the search icon in a input text, but I don't know how to do it.
I want to do something like:
input search
Is it possible to use Bootstrap Icon in a Placeholder? I saw some examples, but the icon didn't disappear when I was writing text

Answer 1

Add Css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Add Js
<script src="https://kit.fontawesome.com/yourcode.js"></script>
Add input in <form>
<input style="font-family: FontAwesome;" placeholder='&#xf002 Search...' />

Answer 2

You can try using position CSS set position for icon-search
<div class="form-group search">
<i class="fa fa-search"></i>
<input type="text" class="form-control" id="search" placeholder="Search">
</div>
div.search {
margin: 1em;
position: relative;
input {
padding: 1em 1em 1em 3em;
}
i {
position: absolute;
top: 2px;
opacity: 0.6;
padding: 1em;
display: flex;
align-items: center;
}
}
or an input group Search input with an icon Bootstrap
https://www.codeply.com/go/ioPsDfyCBc

Answer 3

You can try this,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search" style="color:black"></i></span>
<input type="text" class="form-control" placeholder="Search"/>
</div>

Answer 4

In bootstrap 5 you can simply use a button with position-relative class and transparent background.
<form class="row">
<div class="col-sm-12 col-lg-9">
<input class="form-control ps-5" type="search" placeholder="Search items..." aria-label="Search">
<button style="bottom: 20px;" class="btn bg-transparent px-2 py-0 position-relative translate-middle-y" type="submit">
<!-- You will need to import bootstrap icons or font-awesome -->
<i class="bi bi-search fs-5"></i>
</button>
</div>
<div class="col-sm-12 col-lg-3">
<!-- Here you can add a button width with w-100 class it's optional -->
<a class="btn btn-primary w-100" href="#">Filters Items</a>
</div>
</form>