How to Insert a Search Icon in Bootstrap ?

Last Updated : 08 May, 2023

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.).

There are two methods:

Using bootstrap Glyphicons
Using font awesome icons

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-by-step guide for the implementation:

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 the 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>