Bootstrap Glyphicons

Bootstrap ships with more than 250 glyphicon fonts from the Glyphicons Halflings set. Glyphicons can be used with different Bootstrap component like buttons, navbars , lists etc.

There are some rules in order to use glyphicons, individual glyphicon class need to be used for a particular glyphicon within base class. Also remember that you must use <span> element to display glyphicon because it cannot directly add to the components.

Syntax

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

Note: The * symbole in above syntax must be replaced with the name of the glyphicon name e.g. glyphicon-asterisk

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

Glyphicon Example

<div class="bootstrap-demo">
<div class="btn-toolbar" role="toolbar">
    <div class="btn-toolbar" role="toolbar">
	<h2>Glyphicon</h2>
      <p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>
      <p>Asterisk icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-asterisk"></span>
        </a>
      </p>
	  <button type="button" class="btn btn-danger btn-xs">
        <span class="glyphicon glyphicon-asterisk"></span> Asterisk</button></br></br>
		 <button type="button" class="btn btn-warning btn-sm">
        <span class="glyphicon glyphicon-envelope"></span> Envelope</button></br></br>
		<button type="button" class="btn btn-info">
        <span class="glyphicon glyphicon-search"></span> Search</button></br></br>
		<button type="button" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-download"></span> Download</button></br></br>
		
		<div class="alert alert-danger" role="alert">
		  <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
		  <span class="sr-only">Error:</span>Enter a valid email address
		</div>
    </div>
  </div>
  </div>

See Live Example

The above Glyphicon example will produce below output: