How to use bootstrap font icon

Bootstrap bundles glyphs in over 200 font formats. First, let us first understand what a font icon is.

#What is a font icon? (Recommended learning: Bootstrap video tutorial)

Font icon is an icon font used in Web projects. Although, Glyphicons Halflings requires a commercial license, you can use these icons for free through project-based Bootstrap.

In order to express our gratitude to the icon author, we hope that you will include a link to the GLYPHICONS website when using it.

Get the font icon

We have downloaded the Bootstrap 3.x version in the Environment Installation chapter and understood its directory structure. Font icons can be found in the fonts folder, which contains the following files:

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons -halflings-regular.ttf

glyphicons-halflings-regular.woff

The relevant CSS rules are written in bootstrap.css and bootstrap-min.css in the css folder in the dist folder on the file.

There are 200 classes, each class is for an icon. The common format of these classes is as follows:

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

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

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

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to use bootstrap font icon. For more information, please follow other related articles on the PHP Chinese website!