How can I add a Bootstrap Icon in a placeholder?

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:

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

https://stackoverflow.com/a/63160543/8384983 check this – Neeraj Dec 22 '21 at 08:46 — Neeraj, Dec 22 '21 at 08:46

score 1 · Accepted Answer · answered Dec 20 '21 at 12:33

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...' />

answered Dec 20 '21 at 12:33

Himesha Patel

143
7

1

That is a FontAwesome icon, not a Bootstrap icon – saul-ps Dec 21 '21 at 08:17

score 0 · Answer 2 · answered Dec 20 '21 at 13:02

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

I already saw this example, but the search icon doesn't disappear when you type in the input. — saul-ps, Dec 21 '21 at 08:14

score 0 · Answer 3 · answered Dec 20 '21 at 13:07

0

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>

answered Dec 20 '21 at 13:07

lakshna S

255
1
5

I want the search icon to disappear when I type in the input – saul-ps Dec 21 '21 at 08:15

Elias Glyptis · Answer 4 · 2022-10-23T08:38:13.200

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>

score 0 · Answer 5 · answered May 11 '23 at 08:27

Steps to add bootstrap icons in the placeholders of input tags.

import bootstrap icons first in the html or install it using npm, use this link for more details https://getbootstrap.com/docs/5.3/getting-started/download/
After that copy html code from icon as shown in the screen shot.
use place holder like this placeholder=" Search..." Note: how I added code copied from screenshot in the placeholder.
It is very important to add this style for that particular input tag using class or id font-family: bootstrap-icons;

How can I add a Bootstrap Icon in a placeholder?

5 Answers5