Bootstrap Glyphicons

aims

Fonts icon because it's some of the benefits is becoming increasingly popular. In this tutorial we will discuss how to use and customize Bootstrap 3 Glyphicons. We will explain CSS rule works in the background, which will give you a better understanding of the working principle of the font icon. This way, you will be acquainted with any icon font settings except Glyphicons of.

What is Glyphicons

Glyphicons is an icon font used in the Web project. Although the use Glyphicons need a commercial license, but you can based on Bootstrap project to free use these icons. In order to express gratitude icon authors hope that you add when using Glyphicon website links.

Get Glyphicons

If you have downloaded Bootstrap 3 (version 3 or any previous version) from https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip, you can find dist folder of fonts folder glyphicons inside. There are four files - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff. Related CSS rules written in the dist folder css folder bootstrap.css and bootstrap-min.css within the file.

How Glyphicons

In general, we can conclude by Bootstrap 3 common syntax for using Glyphicons

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

* Can be any icon that represents a specific keyword. The following example demonstrates how to use it through the button.

 <Button type = "button" class = "btn btn-primary btn-lg">
		<Span class = "glyphicon glyphicon-user"> </ span> User
	</ Button> 

View Online instance.

CSS interpretation of the rules

The following CSS rule constitutes glyphicon class

@ Font-face {
  font-family: 'Glyphicons Halflings';
  src: url ( '../ fonts / glyphicons-halflings-regular.eot');
  src: url ( '? ../ fonts / glyphicons-halflings-regular.eot #iefix') format ( 'embedded-opentype'), url ( '../ fonts / glyphicons-halflings-regular.woff') format ( 'woff'), url ( '../ fonts / glyphicons-halflings-regular.ttf') format ( 'truetype'), url ( '../ fonts / glyphicons-halflings-regular.svg # glyphicons_halflingsregular') format ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

So font-face rule is in fact the place to find glyphicons declaration font-family and location.

.glyphicon class declare a relative position offset from the top of 1px, rendered as inline-block, the statement fonts, font-style provisions and font-weight is normal, set the row height to 1. In addition, the use of -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; get cross-browser consistency.

Then, where

.glyphicon: empty {
  width: 1em;
}

Empty glyphicon.

There are 200 class, each class for an icon. The class follows the common format

.glyphicon-keyword: before {
  content: "hexvalue";
}

For example, user icons used in our example, it's class as follows

.glyphicon-user: before {
  content: "\ e008";
}

We have seen how to use it, let's see how to customize Glyphicons.

We will start the above example, by changing the font size, color, and apply text shadow to be customized icon.

Here is the code begins

<Button type = "button" class = "btn btn-primary btn-lg">
	<Span class = "glyphicon glyphicon-user"> </ span> User
</ Button>

The effect is as follows

Custom Font Size

By increasing or decreasing the font size of the icon, you can make the icon appear larger or smaller.

<Button type = "button" class = "btn btn-primary btn-lg" style = "font-size: 60px">
	<Span class = "glyphicon glyphicon-user"> </ span> User
</ Button>

Custom font color

<Button type = "button" class = "btn btn-primary btn-lg" style = "color: rgb (212, 106, 64);">
	<Span class = "glyphicon glyphicon-user"> </ span> User
</ Button>

Apply text shadow

<Button type = "button" class = "btn btn-primary btn-lg" style = "color: rgb (212, 106, 64);">
	<Span class = "glyphicon glyphicon-user"> </ span> User
</ Button>

Custom Glyphicons

Click here to customize online Glyphicons.