How to Insert a Search Icon in Bootstrap ?

14 Sep, 2021
In this article, we will see how to insert a search icon in Bootstrap. While Bootstrap does not include an icon set by default, they do have their own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. There are various ways to add a search icon or other icons to your HTML page. All the icons in the icon libraries can be customized with CSS (size, align, rotate, shadow, color, etc.).
Method 1: Using bootstrap Glyphicons: Bootstrap gives us various predefined icons including search icons. You can add various types of icons from https://glyphicons.com/.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
 
Step 2: Add <div> tag in the HTML body with class container.
Step 3: Now add any icon that you want using the below syntax, where the name is the name of glyphicon.
<span class="glyphicon glyphicon-name"></span>
Example: The following example shows different types of glyphicons and their usage.
HTML
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head>  <body>      <div class="container">        <h2 style="color:green">Glyphicons Examples</h2>          <p>Camera icon:            <span class="glyphicon glyphicon-camera"></span>        </p>          <p>Search icon:<span             class="glyphicon glyphicon-search"></span></p>            <p>Search icon on a button:            <button type="button" class="btn btn-default">                <span class="glyphicon                 glyphicon-search"></span> Search            </button>        </p>          <p>Bell icon:            <span class="glyphicon glyphicon-bell"></span>        </p>    </div></body>  </html>
Output:
All glyphicons
Method 2 Using font awesome icons: Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework. Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS.
Step by step guide for the implementation:
Step 1: Copy your kit’s code into the <head> of each template or page in your project where you want to use Font Awesome via the kit. If you’ve got other versions or flavors of Font Awesome already in use, make sure to remove them.
<script src=”https://kit.fontawesome.com/6ec9c7cfba.js” crossorigin=”anonymous”></script>
Step 2: Add any free icons to a project with one line of code.
Syntax:
<i class="fas fa-camera"></i>   
<i class="fas fa-camera"></i>  
<span class="fas fa-camera"></span> 
Example: The following example shows different types of font-awesome icons including search icon and their usage.
HTML
<!DOCTYPE><html>  <head>    <script src="https://kit.fontawesome.com/6ec9c7cfba.js"        crossorigin="anonymous">    </script></head>  <body>    <h1 style="color:green">        GeeksforGeeks    </h1>      <i class="fas fa-chess" style="font-size:32px;"></i>    <i class="fas fa-biking" style="font-size:42px;"></i>    <i class="fas fa-bacteria" style="font-size:52px;"></i>    <i class="fa fa-car" style="font-size:62px;"></i>    <p style="color:green">Search icon        <i class="fas fa-search" style="font-size:72px;"></i>    </p></body>  </html>
Output:
Search icon
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to set vertical alignment in Bootstrap ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property