Bootstrap Icons

Bootstrap offers a variety of icons, known as Glyphicons, which enhance web design by integrated into HTML components like buttons and inputs tags, these icons add functionality and visual appeal to various elements without mixing other classes or text.

Glyphicons

Glyphicons are created by bootstrap and are available for free to use on websites. There were more than 250 glyphs supported by bootstrap 3 and above. These are no more supported by bootstrap.

Glyphicons provides iconography, alerts, input groups, alerts, dropdowns, navigation, etc. Glyphicons can be reused and are very helpful in many cases. The number of Glyphicons increased bootstrap introduced bootstrap icons and glyphs are replaced by icons in bootstrap 4 and above.

Available glyphs

Let us look at some of the popular Glyphicons.

You can explore more Glyphicons at the official website of Glyphicons

How to Use Glyphicons?

Let us look at some of the conditions necessary to use Glyphicons. Bootstrap icons are more flexible than Bootstrap Glyphicons. Bootstrap Glyphicons are only supported by Bootstrap 3.

Don't Mix with Other Components

We use the HTML <span> tag with the Glyphicons' class to display an icon on the webpage. These cannot be mixed with other classes. Proper spacing is required between the text and icon for proper padding. Glyphicons cannot also be combined with other elements of HTML.

Example:

Output

Explaination In the example above, the <span> tag is used inside the <p> or paragraph tag. No other classes are used inside it except the Glyphicons class.

Only for Use on Empty Elements

Inside the span tag, we cannot add any text or any element when using it for the Glyphicons.

Let us look at another example to see what happens when we add text between the span tags of the icon.

Example:

Output:

Explanation:

As we can see the spacing and text size are not proper when we try to add text between span tags. Having text out of the glyphicon span tags is a good practice.

Changing the Icon Font Location

Bootstrap initially holds the icon font files in the ../fonts/ folder and assumes to find them only, relative to the compiled CSS files. Due to any reasons if this is moved or renamed implies CSS is updated, the following ways can be used to resolve the issue.

• We can change the variables @icon-font-path and/or @icon-font-name in the source Less files.
• The Less compiler provides relative URL's option, which can be utilized.
• The path of the url() can also be modified in the compiled CSS.

Accessible Icons

Inside the span, along with the class attribute another attribute aria-hidden="true" must be set to true to avoid unintended output on the screen.

If we are using these icons with no alternative text that would convey its purpose, such as a button with only an icon, then also it is necessary to add the aria-label attribute to the control.

Examples

Let us look at examples of Glyphicons` in Bootstrap.

Buttons

Glyphicons are mostly used with buttons to make them interactive and force the user to act. Below are some of the button examples using Glyphicons.

Example:

Output

Explanation:

In the example above, the Glyphicons can either be used with the text as in the case of the Save button or only a glyph icon can also be used as we have used for sending messages and alignment of text.

Button Groups for a Toolbar

A Button group is a series of buttons grouped together. Let us look at an example of a group of buttons that are used for a playlist. These buttons include the play button, pause button, next button, etc.

Example:

Output

Navigation

Navigation bars in Bootstraps are used to have multiple buttons and dropdown(s). We can also fix the navbar to the top of the page.

Let us take an example of the navigation bar with glyphs

Example:

Output

Explanation:

In the example above, we have used glyphs for home and inbox tabs. We are using nav and nav-pills classes for the unordered list.

Prepended Form Inputs

We can add buttons to the inputs and enhance the user experience of the form. These buttons can either be added after the text-based input or before it. We will use the input-group Bootstrap class to group buttons and inputs.

Later we will add the span with the class input-group-addon for the buttons and the input for the text field inside the form.

Let us have a look at a few such inputs.

Example:

Output

Explanation:

In the example above we have used two prepended and postpended form inputs. We have used Glyphicons to display the username symbol and the euro symbol. Rest Bootstrap CSS classes are used. For the parent <div> element input-group and for the child elements input-group-addon class for symbols and buttons and form-control class for the input element.