WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Glyphicons


In this chapter we discuss of Glyphicons

Glyphicons

Bootstrap provides official site glyphicons from the Glyphicons Halflings set.

Glyphicons are very attractive and used in text, buttons, toolbars, navigation, forms, etc.

Here are some examples of glyphicons:

glass glyphicon:

Signal glyphicon:

glyphicon-flag:


Glyphicon Syntax

A glyphicon is inserted with the below syntax:

<span class="glyphicon glyphicon-name"></span>

The name part in the syntax above must be replaced with the proper name of the glyphicon.


Glyphicon Example

The following example shows different ways to use glyphicons:

Example

<p>glass glyphicon: <span class="glyphicon glyphicon-glass"></span></p>
<p>glass glyphicon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Signal glyphicon: <span class="glyphicon glyphicon-signal"></span></p>
<p>Signal glyphicon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-signal"></span> signal
  </button>
</p>
<p>Signal glyphicon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-signal"></span> signal
  </button>
</p>
<p>glyphicon-flag: <span class="glyphicon glyphicon-flag"></span></p>
<p>glyphicon-flag on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-flag"></span> flag
  </a>
</p>
Try it Yourself »