Bootstrap 3 Glyphicons

Add icons to a web page easily with Bootstrap glyphicons.

Bootstrap includes more than 250 glyphicons from the Glyphicons Halflings set, which has been made available to Bootstrap for free.

Bootstrap 3 Glyphicons are actually fonts, so you can scale them and color them as you please. Bootstrap previously used image sprites for icons.

To add a glyphicon, add a <span> tag with Bootstrap's .glyphicon class and also the class for the specific glyphicon that you require.

For example, the following code uses the "trash" glyphicon:

Here's what that looks like:

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

Glyphicons in Buttons

You can use glyphicons almost anywhere. For example, you can use them within buttons:

<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>

Leave a space between the glyphicon and any text so that the text doesn't appear too close to the icon.

Accessibility

The aria-hidden="true" in the above examples is used for hiding the Glyphicon in screen readers.

Be careful when using buttons that only contain a glyphicon (i.e. no other text to explain the button). Screen readers will have trouble interpreting such buttons. In this case, you can use the aria-label attribute against the actual form control.

Also, if you're using the icon to convey meaning, you should provide alternative content to convey that meaning in screen readers. In this case, you can place alternative content inside a <span> element and use Bootstrap's .sr-only class to make it available only to screen readers. Like this:

Full List of Glyphicons

See the official Bootstrap website full list of glyphicons.