How to Use Glyphicons

Download twitter-bootstrap eBook

Example

Twitter Bootstrap supports icons called glyphicons and they can be used with all tags of HTML.

All icons require a base class and individual icon class.

Keep in mind that icon classes cannot be directly combined with other components, so always use inner <span></span> tag.

If your HTML code has inner child elements then you are not able to use icon classes for that particular tag.

Examples

For example, you are creating a bootstrap button, then the syntax for this button should be like this:

<button type="button" class="btn btn-default btn-lg">
   Star
</button>

So in above example a simple bootstrap button is created but now you want to add a glyphicon in this button, for this simply add a <span> element inside a <button> tag. Like this:

<button type="button" class="btn btn-default btn-lg">
       <span class="glyphicon glyphicon-star" aria-hidden="true"></span>Star
</button>

enter image description here

Stats

Contributors: 3
2016-11-06
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook