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.
Example:
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.
Examples:
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
