Bootstrap - Glyphicons

Glyphicons are a font family of 260 icons from the Glyphicon Halflings set. Normally these icons are not available for free, but the creator has made them available to Bootstrap customers for free.

Many thanks to the providers of Glyphicons

Listing 10.6 - A Glyphicon Inline in Text

I sardines!


For decorative icons, you should hide them from assistive devices with the aria-hidden="true" attribute. Listing 10.7 shows how.

Listing 10.7 - Icon hidden from Assistive Devices


When the icon needs to convey meaning, such as the one in Listing 10.6, you should include additional content that is hidden inside an .sr-only class. This will ensure that the meaning is clear to everyone who visits the page. Listing 10.8 implements this.

Listing 10.8 - Icon with Meaning

I love cookies!

Icon courtesy Glyphicons.

(End of examples of image styles.)