JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Glyphicons

June 18, 2014 by Sutha Kaliannan Leave a Comment

In the present days, font icons are becoming more popular for better user experience. This tutorial explains how to use and customize Glyphicons with Bootstrap. Glyphicons is a collection of monochromatic icons and symbols recognized by most of the people which help them to identify easily links and information on your site. Glyphicons are icon fonts which are based on CSS sprites, in which we can create icons of any color just applying the CSS color property on the specified element.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Glyphicons are not available free, but the creator has made them available for Bootstrap free of cost. We can get number of available Glyphicons at this link Glyphicons Website. When we download Bootstrap, extract the zip file, and we will find file structure of the Bootstrap. We may find glyphicons within fonts folder within dist folder. It contains following four files:

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

The bootstrap.css and bootstrap-min.css files are present within the CSS folder of dist folder.

Using of icons in the code

We can use bootstrap icons along with <span> tag with base class glyphicon and individual icon glyphicon-*, where * indicates keyword with specific icon name. The syntax is as follows:

[code lang=”xml”]
<span class=”glyphicon glyphicon-*”></span>
[/code]

For instance:

[code lang=”xml”]
<button type=”button” class=”btn btn-primary”>
<span class=”glyphicon glyphicon-music”></span>Music</button>
[/code]

The glyphicon glyphicon-music is the name of particular icon class defined in bottstrap.css. They should not be used with other classes and use <span> tag and apply the icon classes to the <span> .

Glyphicons Example

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Icons</h2>
<span class="glyphicon glyphicon-envelope"></span>: Email Icon<br><br>
<span class="glyphicon glyphicon-phone"></span>: Phone Icon<br><br>
<span class="glyphicon glyphicon-music"></span>: Music Icon<br><br>
<span class="glyphicon glyphicon-home"></span>: Home Icon <br><br>
<span class="glyphicon glyphicon-time"></span>: Time Icon
</div>
</body>
</html>
[/code]

Above script defines different types glyphicon icons such as email, phone, music, home and time icons used within the span element. The span element contains base class glyphicon and glyphicon-envelope is the name of the particular icon class and same as to all other glyphicon icon classes.

  • Run Bootstrap Glyphicons Example Demo

Glyphicons Example

Customizing Glyphicon Icons

We can also customize the Glyphicons such as larger size, smaller size and extra smaller size by using btn-lg, btn-sm and btn-xs respectively within the button element. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon icons with large size</h2>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span>: User Icon</button><br><br>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-headphones"></span>: Headphone Icon</button><br><br>
<h2>Glyphicon icons with small size</h2>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-camera"></span>: Camera Icon</button><br><br>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-comment"></span>: Comment Icon </button><br><br>
<h2>Glyphicon icons with extra small size</h2>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-earphone"></span>: Earphone Icon</button><br><br>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-repeat"></span>: Repeat Icon </button>
</div>
</body>
</html>
[/code]

Above script defines how to display Glyphicon icons with different sizes on the web page. The class btn btn-default btn-lg is used to display icons with larger size, btn btn-default btn-sm class displays icons with smaller size and btn btn-default btn-xs class displays the icons with extra smaller size and all these classes would be defined within the button element.

  • Run Bootstrap Customizing Icons Demo

Customizing Glyphicons Icons Example

Filed Under: Bootstrap Tagged With: Bootstrap Basics

About Sutha Kaliannan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved