Bootstrap 3 - SPLessons

Bootstrap Glyphicons

Chapter 20

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Glyphicons

Bootstrap Glyphicons

shape Description

Bootstrap Glyphicons includes over 260 glyphs in font format from the Glyphicon Halflings set.

How to use glyphicons?

shape Syntax

glyphicons can be used in many ways and can be also used with buttons, text, toolbars, navigations, forms, alert messages and many more.

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

shape Example

Here is the the simple calendar icon:
Here is the the simple phone icon:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrap Glyphicon Example</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
  <div class="container">
    
    <h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Glyphicons </a> </h2>
  
		<p>Here is the the simple calendar icon: <span class="glyphicon glyphicon-calendar"></span> </p>
		<p>Here is the the simple phone icon:  <span class="glyphicon glyphicon-phone-alt"></span> </p>
  
  </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>

Icons Sizes

shape Description

Glyphicons size mostly depends on the font size of the parent. Here is the example how the icons size varies based on buttons.

shape Example


      <button type="button" class="btn btn-default btn-lg">
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
      </button>
      <button type="button" class="btn btn-default">
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
      </button>
      <button type="button" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
      </button>
      <button type="button" class="btn btn-default btn-xs"> 
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
      </button>

Some Bootstrap Glyphicons

shape Examples

Glyphicon Code
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-minus"></span>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-film"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="glyphicon glyphicon-off"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="glyphicon glyphicon-save"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="glyphicon glyphicon-triangle-right"></span>
<span class="glyphicon glyphicon-menu-left"></span>

Summary

shape Key Points

  • Glyphicons are symbols/icons used in a website.
  • The class .glyphicon glyphicon-name is used by replacing name of glyphicon in the given class.