Get Access to World’s largest Template Library & Tools

How to Use Glyphicons in Bootstrap 3

In this article, we are going to look into how to use Glyphicons with Bootstrap 3. But before that let’s see what is Glyphicons?

`GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.`

Bootstrap 3 comes with good amount of components and Glyphicons is one of the components we can get with it. Glyphicons comes with the set of 250 clean and sharp icons, additionally Glyphicons Halflings are also available for free with bootstrap which is not free actually. :) [Bootstrap Grid – Column Wrapping]

Now we will go through the process of using Glyphicons with Bootstrap 3. For the performance point of view, we have to use two separate classes to make it work. One class behave as a base class (glyphicon) which is common for all icons and the second class is related to respective icon class (e.g. glyphicon-menu-right). [Bootstrap Alternative CSS Frameworks]

There are few things which we need to keep in mind while using Glyphicons in Bootstrap 3.

Mixing with Other Components

Just like Glyphicons, Bootstrap is having many other components as well and similarly those depend on classes of element. So we need to make sure that we are using only Glyphicons related classes in an element. So if we have used ‘glyphiconglyphicon-menu-right’ classes for any element then that element is not supposed to contain classes of another component to make this work properly.


In above invalid example, you can see that ‘btn-group’ class is added which is a separate component of Bootstrap.

Empty Elements

We need to make sure that we are using Glyphicons on empty elements only. When we Glyphicons then, that element should not contain any text or child elements. See below examples for more details:

Make icons Accessible

As this is going to be just icon element, it may create unintended and confusing output in screen readers. So we need to make sure that to hide for that. We can achieve the same using aria-hidden=”true” attribute to an element. [Bootstrap Website Templates]

When the only icon is used to decorate page then we need to make sure that we provide a meaning of using that icon. We can achieve the same by using aria-label=”Meaning Here” attribute.


Using with Button:

Using Glyphicons with Message Text

When we want to convey the hint for icon used for users of assistive technologies, then it’s time to use an element with a .sr-only class just like below. Also, you can find better use of this in an alert component of Bootstrap 3.

Feel free to share your use case with Glyphicons in Bootstrap. Having questions? not an issue just post a comment below.

More in Tutorials

How to Create a Professional Resume Using Microsoft Word - TutorialHow to Write a Cover Letter - Tutorial
How to Write a Professional Resignation Letter - TutorialHow to Make/Create a Thank You Letter for a Scholarship [Templates + Examples] 2023
How to Create a Lesson Plan in Word - TutorialHow To Make/Create a Business Letter [Templates + Examples] 2023
How to Create an Affirmative Action Plan - TutorialHow to Create a Gantt Chart in Excel Easily - Tutorial
How to Create a Resume on a Mac - TutorialHow to Create an Action Plan - Tutorial
How to Create a Lesson Plan for Elementary School - TutorialHow to Create a Family Tree Chart in Excel, Word, Numbers, Pages, PDF - Tutorial
How to Create a Pie Chart in Microsoft Excel - TutorialHow To Make/Create a Receipt [Templates + Examples] 2023
How to Create a Project Schedule in Excel - TutorialHow to Make a Certificate in Microsoft Word - Tutorial
How to Create a Calendar in Word - TutorialHow to Create a Birth Certificate using Word - Tutorial
How to Create a Calendar in Excel - TutorialHow to Make a Gift Certificate on Microsoft Word - Tutorial
How to Create a Family Tree in Microsoft Word - TutorialHow to Make/Create a Timeline in Microsoft Word [Templates + Examples] 2023
How to Create a TimeSheet in Excel - Tutorial5+ How to Make an Inventory Using Excel - Tutorial
How to Create an Invoice on ExcelHow to Create Receipts in Excel
How to Create a Family Tree in PowerPoint - TutorialHow to Use Bootstrap Tooltip
How to Use Glyphicons in Bootstrap 3How to Create Custom PHP Contact Forms
How to Use PHPBrew & VirtPHP - TutorialUnderstanding Bootstrap Grid - Column Wrapping
How to Create a Basic Timeline Template in Excel 2023 - Tutorial10 Top YouTube Channels for Game Development Tutorials in 2023!
What is a CSS Preprocessor and Why You Should Use IT?25+ Great Examples of InDesign In Use - Tutorials
Top Ui Photoshop Tutorials for Freshers5 Tips to Make Your Website Invincible From Hackers!
20 Easy Illustrator Tutorials For Beginners!19+ Illustrator Tutorials For Creating Isometric Illustrations!
20+ Useful Responsive Web Design TutorialsHow to Make an App - Free Online Tutorials
Html5 Tutorial for Beginners - Techniques and Examples
bottom banner