Skip to Main Content

Using Bootstrap in LibGuides

LibGuides is built upon Bootstrap, a framework of CSS, JavaScript, and HTML. Librarians can increase the usability and functionality of their guides with Bootstrap’s components without the need of extensive web development experience.

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: