How to use Twitter BootStrap Glyphicons Vector Graphics?

Programming
May 15, 2016
5 (1 votes)
How to use Twitter BootStrap Glyphicons Vector Graphics? How to use Twitter BootStrap Glyphicons Vector Graphics?
3 5 82
Our Customizable WordPress plugin for informative Sidebar

Twitter BootStrap is an advanced HTML, CSS & JAVASCRIPT framework to develop responsive & mobile friendly web-pages. It is open source & free to use Commercially. To Getting Started with BootStrap you can download the latest version from http://getbootstrap.com. Do you explored the file structures of BootStrap? It contain 3 major folders CSS, Fonts & JS.

CSS

Inside CSS folder you can found bootstrap.css. This is the file where many per-defined CSS classes are there. These classes are Optimized to render on any resolution. Generally when we develop an application we create a main.css file. Which contains 90% common & random used CSS classes. The same concept is reflected on bootstrap.css.

JS

JS folder contains bootstrap.js file. Like CSS file this JS file contains some per-defined JAVASCRIPT functions. Using BootStrap JS you can do Transitions, Modal, Dropdown, Scrollspy, Tab, Tooltip etc.

FONTS

In this section Glyphicons comes into picture. Bootstrap included 245 more glyphs from the Glyphicon Halflings set to use in developing RWD (Responsive Web Design), mobile-first web pages & Web applications.

A native approach built into bootstrap Glyphicons are useful in develop of the smoothly front-end web development but attractive and rich visual interface. Normally web developers are uses the hard-coded images on front end it causes the page loading & page size. Compare to image use of these vector graphics give better performance. Glyphicons in UI development gives better quality deliverable icon set which renders in all the cross browsers & devices.

Glyphicons comes inside fonts folder of BootStrap. BootStrap provides following types of Glyphicons font files.

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

To use the Glyphicons, simply use the following class. Keep remember for an example you want to show an search icon near a text box. In this place to use “glyphicon-search” class first use “glyphicon” as the parent class then refer to parent class using the child class glyphicon-search. Else only glyphicon-search will not work.

Example to use BootStrap Glyphicon classes

<span Class="glyphicon glyphicon-search"></span>

* Mostly recommended html tag for Glyphicons is <span>.

The disadvantages of image methods

  • We couldn’t change the color of the icons.
  • We couldn’t change the background-color of the icons.
  • We couldn’t change the icon size.
  • It may causes in the page loading and becomes heavy in page size.

So instead of image method web developers moved to use Font-based icons, as this used SVG vector icons which don’t having such circumstances. Glyphicons use the font based icons method.

BootStrap Glyphicons key advantages

  • Scalable – works nicely regardless of client device’s resolution.
  • Can change the color with CSS.
  • Can make animation using CSS.
  • Can add blow, gloom, and any other CSS property.
  • Can increase the icon size by increasing the font-size.
  • Can change icons font by changing font-family in CSS.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot'#mz);
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff'#mz) format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

CSS connects to font as “.glyphicon” base class.

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
}

it uses an separate base class which connect to a Uni-code.

.glyphicon-envelop:before {
content: "09";
}

Note: Internet Explorer 8 and 9 are works, however, please be aware that some CSS3 properties and HTML5 elements are not fully working by these browsers. In addition, Internet Explorer 8 need to add of Respond.js to allow to bear with CSS media queries.

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Tags:, , ,