How to use glyphicons in bootstrap 3?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use glyphicons in bootstrap 3 with code example.

Here, we will use .glyphicon glyphicon-pencil class to make a use glyphicons.

Glyphicons are icon fonts that can be used in a variety of web applications. They are a set of visual icons, symbols, and fonts provided by Bootstrap.

Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260 Glyphicons from the Glyphicons Halflings set.

Some examples of Glyphicons are:

  • Pencil glyphicon
  • Home glyphicon
  • Lock icon glyphicon etc.


Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>

<div class="container">
  <h2>Glyphicon Examples</h2>
  <p>Pencil icon as a link:
    <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
  <p>Home icon on a button:
    <button type="button" class="btn btn-secondary">
      <span class="glyphicon glyphicon-home"></span> Home
  <p>Refresh icon on a styled button:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-refresh"></span> Refresh
  <p>Lock icon: <span class="glyphicon glyphicon-lock"></span></p>      
Lock    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-lock"></span> Lock 


In the above code, we have used .glyphicons class to use glyphicons in bootstrap

Check the output of the above code example.

Bootstrap, Glyphicon

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts