Bootstrap - Glyphicons

19RH1A05H6 Thanvi lahari Pendyala
Last Updated: May 13, 2022

Introduction

Glyphicons! Sounds fancy, but you never knew what they exactly are and how to use them in your code, right.? Don’t worry, we’ll be discussing Glyphicons further in this article to help you get started and get familiar with them.

Glyphicons

Glyphicons are a set of monochromatic icons and symbols that can be used in bootstrap projects. These are taken from Bootstrap Glyphicons Halflings Set, which includes 260 glyphicons. Usually, Glyphicons Halflings are not free, but the creator made them free exclusively for bootstrap. The glyphicons are used for text, forms, buttons, toolbars, navigation, and other web components. These icons help us reduce the text and deliver the information shortly and efficiently.

Where to find Glyphicons

To add bootstrap glyphicons into your project, these are the few ways provided below:

  1. Download the glyphicons package using npm or bower 
    npm install glyphicons-only-bootstrap
    bower install glyphicons-only-bootstrap
     
  2. Paste this link into your head section <head> section of the code.
     
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">


Glyphicons can be found in the fonts folder in its directory when you download them into your bootstrap project folder with the following file extensions:

  1. glyphicons-halflings-regular.eot
  2. glyphicons-halflings-regular.svg
  3. glyphicons-halflings-regular.ttf
  4. glyphicons-halflings-regular.woff

How to use Glyphicons

To use glyphicons in your code, you must add the classes .glyphicon and .glyphicon-<NameofAnyIcon>. Here’s the code for a few icons for your better understanding. The glyphicons can be used as icons, buttons, links, alert components, navigation, etc.

As icons
 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.0/js/bootstrap.min.js">
</script>
  </head>
  <bod >
    <div class="row container">
       <span class="glyphicon glyphicon-heart col-md-3"></span> Heart    
     <span class="glyphicon glyphicon-user col-md-3"></span> User   
     <span class="glyphicon glyphicon-star col-md-3"></span> Star   
     </div>
  </body>
</html>

As buttons
 

<div class="container bg-primary">
<button type="button" class="btn btn-default btn-md">
       <span class="glyphicon glyphicon-heart"></span> Heart
 </button>
<button type="button" class="btn btn-default btn-md">
      <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-md">
      <span class="glyphicon glyphicon-star"></span> Star
 </button>
 </div>


 

As links
 

<a href="#">
         <span class="glyphicon glyphicon-heart col-md-3"></span> Heart
      </a>
<a href="#">
         <span class="glyphicon glyphicon-user col-md-3"></span> Heart
      </a>
<a href="#">
         <span class="glyphicon glyphicon-star col-md-3"></span> Heart
      </a>

In alerts
 

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

 

There are different types of glyphicon sets available for usage in bootstrap for free, but developers in need of glyphicons can purchase the license and use them in their projects. The sets currently available are:

  1. Basic set
  2. Halflings set
  3. Filetypes set
  4. Smileys set
  5. Humans set
  6. Mind set
  7. Weather set
  8. Camera set
  9. Contagion set
  10.  Arrows set

Frequently Asked Questions

1. What are bootstrap glyphicons?
Bootstrap glyphicons are a set of symbols and icons that are from the Glyphicon Halflings set. These require a license, but the creator has made them free for bootstrap.
2. Can I use glyphicons in bootstrap 4 and bootstrap 5?
Bootstrap glyphicons are not supported in these versions anymore for free. But there are other free icons like font awesome icons, which you can use in bootstrap.
3. Can I change the color and size of glyphicons?
Yes, you can change both the size, color, and all other styling properties of glyphicons using CSS styling properties.

Key Takeaways

Let’s discuss what we learned in this article briefly

  • Bootstrap 3 provides us with a set of icon fonts that are free to use only with bootstrap. These are called Bootstrap Glyphicons.
  • Glyphicons can be used as buttons, links, forms, navigation, dropdowns, and all other components where icons are necessary.
  • There are different file formats in icons in glyphicons set and can be used in websites using .glyphicon class and .glyphicon-<IconName>.

 

Hey Ninjas! Experiment with the glyphicons and create fantastic projects using them. We found the perfect course for you to enhance your development skills in web development. Check this out and become the best developer.
 

Happy Learning! 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think