Bootstrap font icon (Glyphicons)

This chapter will explain the font icon (Glyphicons), and some examples to understand its use. Bootstrap font formats bundled with over 200 glyphs. First, let us first understand what is the font icon.

What is the font icon?

Fonts icon is an icon font used in the Web project. Although, Glyphicons halflings need a commercial license, but you can based on Bootstrap project to free use these icons.

In order to express gratitude icon author, I hope you add links GLYPHICONS site during use.

Get the Fonts icon

We have the environment installed Chapters Download the Bootstrap 3.x version, and understand its directory structure. In thefontsfolder icons can find the font that contains these files the following:

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

Related CSS rules written in thedistfolder css folderbootstrap.cssandbootstrap-min.csswithin the file.

Fonts icon list

Click here to view the list of available fonts icon.

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. These common format class is as follows:

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

For example, user icons to use, it's class as follows:

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

usage

To use an icon, simply use the following code. Please keep the appropriate space between icons and text.

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

The following example demonstrates how to use the Fonts icon:

The results are as follows:

Font icon with the navigation bar

Custom Fonts icon

We have seen how to use the Fonts icon, then we see how to customize the font icon.

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="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Online custom font icon

Click here to customize the font icon >>

Icon list