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:
Glyphicons in Buttons
You can use glyphicons almost anywhere. For example, you can use them within buttons:
Leave a space between the glyphicon and any text so that the text doesn't appear too close to the icon.
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.