Icons – Bootstrap


Icons

The Bootstrap framework provides you with Glyphicons for icons.
Bootstrap doesn’t include an icon library by default, but it has a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.

How to use

To use a Bootstrap icon, create a span tag with base class glyphicon and individual icon class. Use it only on elements that contain no text content and have no child elements.

Example

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

<span class="glyphicon glyphicon-cog"></span>

The Bootstrap framework provides you with over 250 icons called glyphs. They come in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, they only ask that you include a link back to Glyphicons whenever possible.

How To Use

To use Bootstrap icons you simply create a <span> tag and apply the applicable CSS class for the icon. A code example has been provided below.

Example

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bootstrap Glyphicon Class List

This is an example of the CSS classes that bootstrap provides for glyphicons. More of them are available here

.glyphicon glyphicon-plus This is Bootstrap’s plus/add icon.

.glyphicon glyphicon-trash This is Bootstrap’s trash/delete icon.

.glyphicon glyphicon-search This is bootstrap’s search/magnify icon.

.glyphicon glyphicon-envelope This is bootstrap’s envelope icon.

.glyphicon glyphicon-print This is bootstrap’s print icon.

Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS.

Bootstrap Icon in Buttons

<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button>

Note: Bootstrap’s Glyphicons are not available on bootstrap V4

Things to keep in mind

Don’t mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Only use icons on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Note: Bootstrap’s Glyphicons icon is not available on bootstrap V4. However, it still works with V3.3.7 which is available at the link provided below.

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.