Bootstrap font icon


This chapter 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 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 in the css folder in the dist folder. css file.

Font icon list

Click here to view the list of available font icons.

CSS Rule Explanation

The following CSS rules constitute the 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 the font-face rule actually declares the font-family and position where the glyphicons are found.

.glyphicon class declares a relative position offset 1px from the top, renders it as inline-block, declares the font, specifies font-style and font-weight as normal, and sets the line height as 1. Otherwise, use -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; for cross-browser consistency.

Then, the

.glyphicon:empty {
width: 1em;
}

is an empty glyphicon.

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

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

For example, the user used Icon, its class is as follows:

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

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:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head>
<body>

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


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

带有导航栏的字体图标

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字体图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

实例

<!DOCTYPE html>
<html>
  <head>
    <title>导航栏的字形图标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包含了所有编译插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

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

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

Customized 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

Icon list

<td

<t

##glyphicon glyphicon-asteriskTry itTry itTry it##glyphicon glyphicon-music##glyphicon glyphicon-searchglyphicon glyphicon-heart##glyphicon glyphicon -starTry itTry it##glyphicon glyphicon-userTry itglyphicon glyphicon-filmTry it##glyphicon glyphicon-thTry itglyphicon glyphicon-th-listTry itglyphicon glyphicon-okTry it##glyphicon glyphicon-zoom-out Try itTry itTry it##glyphicon glyphicon-road##glyphicon glyphicon-download-altglyphicon glyphicon-download##glyphicon glyphicon-uploadTry itTry itTry itTry it##glyphicon glyphicon-refresh Try it##glyphicon glyphicon-headphonesTry it##glyphicon glyphicon-volume-up Try itglyphicon glyphicon-qrcodeTry itglyphicon glyphicon-barcodeTry itglyphicon glyphicon-tagTry itTry itTry it##glyphicon glyphicon-camera##glyphicon glyphicon-fontglyphicon glyphicon-bold##glyphicon glyphicon-italicTry itTry itTry itTry it##glyphicon glyphicon-align-centerTry it##glyphicon glyphicon-indent-lefttry it##glyphicon glyphicon-facetime-video Try itTry it##glyphicon glyphicon-move##glyphicon glyphicon-step-backwardglyphicon glyphicon-fast-backward##glyphicon glyphicon -backwardTry itglyphicon glyphicon-playTry itTry itTry it##glyphicon glyphicon-forwardTry it##glyphicon glyphicon-chevron-lefttry it##glyphicon glyphicon-plus-sign Try itglyphicon glyphicon-minus-signTry itTry itTry it##glyphicon glyphicon-ok -circle##glyphicon glyphicon-ban-circle##glyphicon glyphicon-arrow-leftTry itglyphicon glyphicon-arrow-rightTry itTry it##glyphicon glyphicon-arrow-downTry it ##glyphicon glyphicon-exclamation-sign Try it##glyphicon glyphicon-eye-openTry itTry it##glyphicon glyphicon-chevron-up##glyphicon glyphicon-chevron-downglyphicon glyphicon-retweet##glyphicon glyphicon -shopping-cartTry itTry it ##glyphicon glyphicon-folder-openTry itglyphicon glyphicon-resize-verticalTry it##glyphicon glyphicon-bullhornTry itglyphicon glyphicon-bellTry it##glyphicon glyphicon-thumbs-down Try itTry itTry it##glyphicon glyphicon-circle-arrow-leftglyphicon glyphicon-circle-arrow-upglyphicon glyphicon-circle-arrow-down##glyphicon glyphicon-globe##glyphicon glyphicon-wrenchTry itglyphicon glyphicon-tasksTry itTry it##glyphicon glyphicon-briefcaseTry it ##glyphicon glyphicon-paperclip Try it##glyphicon glyphicon-usdTry itTry it##glyphicon glyphicon-unchecked ##glyphicon glyphicon-expandglyphicon glyphicon-collapse-downglyphicon glyphicon-collapse-up##glyphicon glyphicon-log-in Try itTry itTry itTry it##glyphicon glyphicon-recordTry it##
→

php.cn

HomeHomeCourseCourseArticleArticleQ&AQ&ADictionaryDictionaryManualManualDownloadDownloadsearchsearchAPPDownload APPDownload
IconClass nameInstance
##glyphicon glyphicon-plusTry it
##glyphicon glyphicon-minus
glyphicon glyphicon-euro
##glyphicon glyphicon-cloud Try it
glyphicon glyphicon-envelopeTry it
glyphicon glyphicon-pencilTry it
glyphicon glyphicon-glassTry it
Try it
Try it
Try it
##glyphicon glyphicon-star-empty
##glyphicon glyphicon-th-large Try it
##glyphicon glyphicon-removetry it
glyphicon glyphicon-zoom-inTry it
##glyphicon glyphicon-offTry it
glyphicon glyphicon-signalTry it
glyphicon glyphicon-cogTry it
glyphicon glyphicon-trash Try it
##glyphicon glyphicon-home
glyphicon glyphicon-file
##glyphicon glyphicon -timeTry it
Try it
Try it
Try it
##glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
##glyphicon glyphicon-list-altTry it
glyphicon glyphicon-lockTry it
glyphicon glyphicon-flagTry it
##glyphicon glyphicon-volume-offTry it
glyphicon glyphicon-volume-downTry it
##glyphicon glyphicon-tags Try it
##glyphicon glyphicon-book
glyphicon glyphicon-bookmark
##glyphicon glyphicon -printTry it
Try it
Try it
Try it
##glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
##glyphicon glyphicon-align-rightTry it
glyphicon glyphicon-align-justifyTry it
glyphicon glyphicon-listTry it
glyphicon glyphicon-indent-rightTry it
##glyphicon glyphicon-pictureTry it
glyphicon glyphicon-map-markerTry it
glyphicon glyphicon-adjustTry it
##glyphicon glyphicon-tint
##glyphicon glyphicon-editTry it
glyphicon glyphicon-shareTry it
glyphicon glyphicon-checkTry it
Try it
Try it
Try it
##glyphicon glyphicon-pause
glyphicon glyphicon-stop
##glyphicon glyphicon-fast-forwardTry it
glyphicon glyphicon-step-forwardTry it
glyphicon glyphicon-ejectTry it
glyphicon glyphicon-chevron-rightTry it
##glyphicon glyphicon-remove-signTry it
glyphicon glyphicon-ok-signTry it
##glyphicon glyphicon-question -sign
glyphicon glyphicon-info-sign
##glyphicon glyphicon-screenshotTry it
glyphicon glyphicon-remove-circleTry it
Try it
Try it
##glyphicon glyphicon -arrow-up
##glyphicon glyphicon-share-altTry it
glyphicon glyphicon-resize-fullTry it
glyphicon glyphicon-resize-smallTry it
##glyphicon glyphicon-giftTry it
glyphicon glyphicon-leafTry it
glyphicon glyphicon-fireTry it
##glyphicon glyphicon-eye-closeTry it
glyphicon glyphicon-warning-signTry it
glyphicon glyphicon-planeTry it
##glyphicon glyphicon-calendar
##glyphicon glyphicon-randomTry it
glyphicon glyphicon-commentTry it
glyphicon glyphicon-magnetTry it
Try it
Try it
Try it
##glyphicon glyphicon-folder-close
## glyphicon glyphicon-resize-horizontalTry it
glyphicon glyphicon-hddTry it
##glyphicon glyphicon-certificate try it
glyphicon glyphicon-thumbs-upTry it
##glyphicon glyphicon-hand-rightTry it
##glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
##glyphicon glyphicon-hand -downTry it
glyphicon glyphicon-circle-arrow-rightTry it
Try it
Try it
Try it
Try it
##glyphicon glyphicon-filter
##glyphicon glyphicon-fullscreenTry it
glyphicon glyphicon-dashboardTry it
##glyphicon glyphicon-heart-emptyTry it
glyphicon glyphicon-linkTry it
glyphicon glyphicon-phoneTry it
glyphicon glyphicon-pushpinTry it
##glyphicon glyphicon-gbpTry it
glyphicon glyphicon-sortTry it
glyphicon glyphicon-sort-by-alphabetTry it
glyphicon glyphicon-sort-by-alphabet-alt Try it
##glyphicon glyphicon-sort-by-order
##glyphicon glyphicon-sort-by-order-altTry it
glyphicon glyphicon-sort-by-attributesTry it
glyphicon glyphicon-sort-by-attributes-altTry it
Try it
Try it
Try it
Try it
##glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
##glyphicon glyphicon-saveTry it
glyphicon glyphicon-openTry it
glyphicon glyphicon-savedTry it