twitter-bootstrap Glyphicons How to Use Glyphicons


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.


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">

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

enter image description here