How to use Bootstrap Icons in HTML - Glyphicons

Bootstrap Icons are provided by glyphicons and they are more than 250 in numbers. These glyphicons are font based icons that accounts for scalability and usability. One of the downside of using these font icons is they are monochromatic in nature. But they are likewise flexible and allow you to change its color, size etc using css properties.

Bootstrap 3 folder structure contains three folders namely CSS, Fonts and JS. Glyphicons files can be found inside the 'Fonts' folder. So if you want to use glyphicons in your web pages, make sure you have bootstrap's fonts folder in place for it to work.

Glyphicons - Bootstrap Icons List

Here is the list of available glyphicons with twitter bootstrap 3 for your reference.

See the Pen Glyphicons - Bootstrap Icons List by Valli (@vpdemo) on CodePen.

How to Use Bootstrap Icons in HTML?

To use these glyphicons, wrap the 'icon-class-name' inside the <span></span> tag like this,

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

Where 'glyphicon' is the base class for all the icons and 'glyphicon-icon-class-name' is the class name of the individual icons like 'glyphicon-comment', 'glyphicon-user' etc.

Add Bootstrap Icons to Buttons

If you want to add these icons to bootstrap buttons use like this.

<button type="button" class="btn btn-danger btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search
</button>

For the above markup you will get a button with search icon.

Make sure you leave a space between the closing span tag (</span>) and the text to have some space between the icon and the text.

Bootstrap Icons Scale Easily

These icons are highly scalable without distortion. As they are icon fonts, we can easily increase or decrease their size with css property ('font-size').

Example

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span> user</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-user"></span> user</button>
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span> user</button>
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user"></span> user</button>

The above markup will produce bootstrap buttons of various sizes. You can see the icons are scaled without jagged edges.

Using Glyphicons - Bootstrap Icons in NavBar

You can add these icons to the menu items in bootstrap navbar like this.

Example

<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- header section -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Travelz</a>
        </div>
        <!-- menu section -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> About Us</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-star"></span> Exciting Packages</a></li>
            </ul>
            <!-- search form -->
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search">
            </form>
        </div>
    </div>
</div>

You will get a bootstrap navigation bar with icons.

Want to learn more about bootstrap navbar? Take a look at this article on creating responsive navbar in bootstrap.

What about using these icons with text? Here goes the example of using it in the paragraph (<p>) element.

<p>
    <span class="glyphicon glyphicon-earphone"></span> Phone: 0 123 456 789 0
</p>
<p>
    <span class="glyphicon glyphicon-envelope"></span> Email: info[@]mydomain.com
</p>

Related Read: Create Vertical Navigation Menu with Icons in Bootstrap

Likewise you can pretty much use these glyphicons wherever you want (like buttons, navbars, text, toolbars etc).

Tips: Do you wonder if glyphicons includes social network icons? Want to add social media icons to bootstrap website? Well learn it here.

Note: Glyphicons are provided for free and as a courtesy try to link back to them.

I hope now you have a better understanding of using glyphicons - bootstrap icons in html pages.