How to use bootstrap font icon

If you want to know more about Bootstrap, you can click: Bootstrap Tutorial

This article will explain font icons (Glyphicons) and understand its use through some examples. Bootstrap comes bundled with glyphs in over 200 font formats. First, let us first understand what a font icon is.

What is a font icon

Font icon is an icon font used in web projects. Although, Glyphicons Halflings require a commercial license, you can use these icons for free through the 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

The font icon 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

Relevant CSS rules are written in the bootstrap.css and bootstrap-min.css files in the css folder in the dist folder.

Usage

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

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

The following example demonstrates how to use font icons:

<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button></p><button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User</button>

The result looks like this:

Navigation with font icons Column

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home">Home</span></a>
                </li>
                <li>
                    <a href="#shop">
                        <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
                </li>
                <li>
                    <a href="#support">
                        <span class="glyphicon glyphicon-headphones">Support</span></a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container --></div><!-- jQuery (Bootstrap 插件需要引入) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包含了所有编译插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Customize font icons

We have seen how to use font icons, next let’s look at how to customize font icons .

We will start with the above example and customize the icon by changing the font size, color and applying text shadow.

The following is the starting code:

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

The effect is as follows:

Customized font size

You can make an icon appear larger or smaller by increasing or decreasing its font size

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

Customize 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>

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!