How can we add a Twitter Bootstrap icon icon-search to the right of a text input element?
The following attempt placed all the icons inside the input element, how can we crop it so it only displays the icon for icon-search?
Current Attempt
CSS
input.search-box {
width: 180px;
background: #333;
background-image: url('/img/glyphicons-halflings-white.png');
background-position: -48px 0;
padding-left: 30px;
margin-top: 45px;
border: 0;
float: right;
}
This question is related to
html
css
twitter-bootstrap
The answer is
For bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
Bootstrap 4.x
With Bootstrap 4 (and Font Awesome), we still can use the input-group wrapper around our form-control element, and now we can use an input-group-append (or input-group-prepend) wrapper with an input-group-text to get the job done:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
<div class="input-group-append">
<span class="input-group-text" id="my-search"><i class="fas fa-filter"></i></span>
</div>
</div>
It will look something like this (thanks to KyleMit for the screenshot):
Learn more by visiting the Input group documentation.
Bootstrap 4.x with 3 different way.
Icon with default bootstrap Style
<div class="input-group"> <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span> </div> </div>Icon Inside Input with default bootstrap class
<div class="input-group"> <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from"> <div class="input-group-append"> <span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span> </div> </div>Icon Inside Input with small custom css
<div class="input-group"> <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from"> <span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span> </div>Custom Css
.icon-inside { position: absolute; right: 10px; top: calc(50% - 12px); pointer-events: none; font-size: 16px; font-size: 1.125rem; color: #c4c3c3; z-index:3; }
_x000D_
_x000D_
_x000D_
_x000D_
.icon-inside {_x000D_
position: absolute;_x000D_
right: 10px;_x000D_
top: calc(50% - 12px);_x000D_
pointer-events: none;_x000D_
font-size: 16px;_x000D_
font-size: 1.125rem;_x000D_
color: #c4c3c3;_x000D_
z-index:3;_x000D_
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />_x000D_
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">_x000D_
_x000D_
<div class="container">_x000D_
<h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>_x000D_
<div class="input-group">_x000D_
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">_x000D_
<div class="input-group-append">_x000D_
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>_x000D_
<div class="input-group">_x000D_
<input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">_x000D_
<div class="input-group-append">_x000D_
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>_x000D_
<div class="input-group">_x000D_
<input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">_x000D_
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>_x000D_
</div>_x000D_
_x000D_
</div>Since the glyphicons image is a sprite, you really can't do that: fundamentally what you want is to limit the size of the background, but there's no way to specify how big the background is. Either you cut out the icon you want, size it down and use it, or use something like the input field prepend/append option (http://twitter.github.io/bootstrap/base-css.html#forms and then search for prepended inputs).
Source: Stackoverflow.com