InfoGuides: Using Bootstrap in LibGuides: Glyphs

Authored by

Robert "Bob" Smith

Bob originally created this guide. The goal was to assist librarians in utilizing Bootstrap within LibGuides.

As of Feb. 2nd, 2024, Bob has left the employ of West Texas A&M University.

Introduction

Bootstrap has many glyphs to use based off of Glyphicon Halflings. For a complete list of available glyphs please see Bootstrap's Glyphicons .

Examples

Glyph	Code	Potential Use
Icon that looks like a letter envelope	`<span class="glyphicon glyphicon-envelope"></span>`	Email icon
Icon that looks like a magnifying glass that hints a search	`<span class="glyphicon glyphicon-search"></span>`	Search icon
Icon that looks like a frame from a film reel	`<span class="glyphicon glyphicon-film"></span>`	Indicate a video
Icon that looks like a check mark	`<span class="glyphicon glyphicon-ok"></span>`	Indicate approval
Icon that looks like the letter X	`<span class="glyphicon glyphicon-remove"></span>`	Indicate something's wrong
Icon that looks like a down arrow pointing towards an inbox	`<span class="glyphicon glyphicon-download-alt"></span>`	Download icon
Icon that looks like a down arrow within a circle	`<span class="glyphicon glyphicon-download"></span>`	Download icon
Icon that looks like a page with a corner bent over	`<span class="glyphicon glyphicon-file"></span>`	Links to file
Icon that looks like an arrow coming out of a square	`<span class="glyphicon glyphicon-new-window"></span>`	Link opens in new window

There are many more icons available to you.

Accessibility Notes

Glyphs that convey meaning that isn't otherwise communicated beyond the glyph will need further information for screen readers. For instance, the examples above have <p class="sr-only"> tag that provides information about the glyph.

For Further Information

For further information and options concerning glyphs, please see the following websites: