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:
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
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=' Search...' />
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.