Glyphicons in Bootstrap

In this tutorial, we will see Glyphicons in Bootstrap.

Glyphicons

Bootstrap has sets of icons, fonts, and symbols called Glyphicons. These are used in web applications/sites.
It has 250+ Glyphicons. They can be accessed from the Bootstrap Glyphicons Halflings set. It is not free although, the creator made it free for Bootstrap.

Let us see how to use Glyphicons in our project?

Wherever we want to use Glyphicons, we need to add a standard code at that particular place.
The code is :

<span class="glyphicon glyphicon-name"> </span>

 

Note: The name part in the syntax above must be replaced with the required name of the Glyphicons.

Where do we use Glyphicons?

  1. It is used for texts, buttons, navigations and etc.
  2. To give an attractive look to our web project.

 

Glyphicon example :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container bg-success">
        <h2>Bootstrap Glyphicons </h2>

        <p>Examples of Glyphicons
        </p>

        <span class="glyphicon glyphicon-time"></span> Here's a clock<br>
        <span class="glyphicon glyphicon-search"></span> Here's a Search glyphicon<br>
        <span class="glyphicon glyphicon-download"> </span>Here's a download glyphicon<br>
        <span class="glyphicon glyphicon-refresh"> </span> Here's refresh glyphicon
    </div>
</body>

</html>

The output of the above code is :

Explanation:

To give an attractive look and styling to the website. Glyphicons are used. To know more about Bootstrap, read  How to add and use Bootstrap in HTML.

Leave a Reply

Your email address will not be published.