Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Bootstrap font icon

May 04, 2021 Bootstrap

Table of contents

1. Bootstrap Font Icon (Glyphicons).

2. What is a font icon?

3. Get the font icon

4. CSS rule interpretation

5. Usage

6. A font icon with a navigation bar

7. Custom font icons

8. The list of icons

Bootstrap Font Icon (Glyphicons).

This chapter explains the font icon (Glyphicons) and learns about its use through a few examples. B ootstrap bundles glyphs in more than 200 font formats. First let's understand what a font icon is.

What is a font icon?

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

To express your gratitude to the icon author, I hope you will include a link to the GLYPHICONS website when you use it.

Get the font icon

We've downloaded Bootstrap 3.x in the Environment Installation section and understand its directory structure. 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

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

A list of font icons

Click here to see a list of available font icons.

CSS rule interpretation

The following CSS rules make up 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 is actually finding the glyphicons place to declare font-family and location.

The .glyphicon class declares a relative position of 1px offset from the top, rendered as inline-block, declares the font, specifies font-style and font-weight as normal, and sets the line height to 1. I n addition, use -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale; Get cross-browser consistency.

Tip: The -webkit-font-smoothing and -moz-osx-font-smoothing properties make the font on the page anti-aliased and look sharper and more comfortable when used.

And then, here it is 

.glyphicon:empty {
  width: 1em;
}

It's empty glyphicon.

There are 200 classes, each for one icon. The common formats for these classes are as follows: 

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

For example, using the user icon, its class is as follows: 

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

Usage

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

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

The following example shows how to use a font icon: 

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></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>

The result is as follows:

Bootstrap font icon

A font icon with a navigation bar 

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


Custom font icons

Now that we've seen how to use font icons, let's look at how to customize font icons.

We'll start with the example above and customize the icon by changing the font size, color, and applying text shadows.

Here's the code to get started: 

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

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

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button

Customize font icons online

The list of icons

icon Class name Example
Bootstrap font icon glyphicon glyphicon-asterisk try it
glyphicon glyphicon-plus try it
glyphicon glyphicon-minus try it
glyphicon glyphicon-euro try it
glyphicon glyphicon-cloud try it
glyphicon glyphicon-envelope try it
glyphicon glyphicon-pencil try it
glyphicon glyphicon-glass try it
glyphicon glyphicon-music try it
glyphicon glyphicon-search try it
glyphicon glyphicon-heart try it
glyphicon glyphicon-star try it
glyphicon glyphicon-star-empty try it
glyphicon glyphicon-user try it
glyphicon glyphicon-film try it
glyphicon glyphicon-th-large try it
glyphicon glyphicon-th try it
glyphicon glyphicon-th-list try it
glyphicon glyphicon-ok try it
glyphicon glyphicon-remove try it
glyphicon glyphicon-zoom-in try it
glyphicon glyphicon-zoom-out try it
glyphicon glyphicon-off try it
glyphicon glyphicon-signal try it
glyphicon glyphicon-cog try it
glyphicon glyphicon-trash try it
glyphicon glyphicon-home try it
glyphicon glyphicon-file try it
glyphicon glyphicon-time try it
glyphicon glyphicon-road try it
glyphicon glyphicon-download-alt try it
glyphicon glyphicon-download try it
glyphicon glyphicon-upload try it
glyphicon glyphicon-inbox try it
glyphicon glyphicon-play-circle try it
glyphicon glyphicon-repeat try it
glyphicon glyphicon-refresh try it
glyphicon glyphicon-list-alt try it
glyphicon glyphicon-lock try it
glyphicon glyphicon-flag try it
glyphicon glyphicon-headphones try it
glyphicon glyphicon-volume-off try it
glyphicon glyphicon-volume-down try it
glyphicon glyphicon-volume-up try it
glyphicon glyphicon-qrcode try it
glyphicon glyphicon-barcode try it
glyphicon glyphicon-tag try it
glyphicon glyphicon-tags try it
glyphicon glyphicon-book try it
glyphicon glyphicon-bookmark try it
glyphicon glyphicon-print try it
glyphicon glyphicon-camera try it
glyphicon glyphicon-font try it
glyphicon glyphicon-bold try it
glyphicon glyphicon-italic try it
glyphicon glyphicon-text-height try it
glyphicon glyphicon-text-width try it
glyphicon glyphicon-align-left try it
glyphicon glyphicon-align-center try it
glyphicon glyphicon-align-right try it
glyphicon glyphicon-align-justify try it
glyphicon glyphicon-list try it
glyphicon glyphicon-indent-left try it
glyphicon glyphicon-indent-right try it
glyphicon glyphicon-facetime-video try it
glyphicon glyphicon-picture try it
glyphicon glyphicon-map-marker try it
glyphicon glyphicon-adjust try it
glyphicon glyphicon-tint try it
glyphicon glyphicon-edit try it
glyphicon glyphicon-share try it
glyphicon glyphicon-check try it
glyphicon glyphicon-move try it
glyphicon glyphicon-step-backward try it
glyphicon glyphicon-fast-backward try it
glyphicon glyphicon-backward try it
glyphicon glyphicon-play try it
glyphicon glyphicon-pause try it
glyphicon glyphicon-stop try it
glyphicon glyphicon-forward try it
glyphicon glyphicon-fast-forward try it
glyphicon glyphicon-step-forward try it
glyphicon glyphicon-eject try it
glyphicon glyphicon-chevron-left try it
glyphicon glyphicon-chevron-right try it
glyphicon glyphicon-plus-sign try it
glyphicon glyphicon-minus-sign try it
glyphicon glyphicon-remove-sign try it
glyphicon glyphicon-ok-sign try it
glyphicon glyphicon-question-sign try it
glyphicon glyphicon-info-sign try it
glyphicon glyphicon-screenshot try it
glyphicon glyphicon-remove-circle try it
glyphicon glyphicon-ok-circle try it
glyphicon glyphicon-ban-circle try it
glyphicon glyphicon-arrow-left try it
glyphicon glyphicon-arrow-right try it
glyphicon glyphicon-arrow-up try it
glyphicon glyphicon-arrow-down try it
glyphicon glyphicon-share-alt try it
glyphicon glyphicon-resize-full try it
glyphicon glyphicon-resize-small try it
glyphicon glyphicon-exclamation-sign try it
glyphicon glyphicon-gift try it
glyphicon glyphicon-leaf try it
glyphicon glyphicon-fire try it
glyphicon glyphicon-eye-open try it
glyphicon glyphicon-eye-close try it
glyphicon glyphicon-warning-sign try it
glyphicon glyphicon-plane try it
glyphicon glyphicon-calendar try it
glyphicon glyphicon-random try it
glyphicon glyphicon-comment try it
glyphicon glyphicon-magnet try it
glyphicon glyphicon-chevron-up try it
glyphicon glyphicon-chevron-down try it
glyphicon glyphicon-retweet try it
glyphicon glyphicon-shopping-cart try it
glyphicon glyphicon-folder-close try it
glyphicon glyphicon-folder-open try it
glyphicon glyphicon-resize-vertical try it
glyphicon glyphicon-resize-horizontal try it
glyphicon glyphicon-hdd try it
glyphicon glyphicon-bullhorn try it
glyphicon glyphicon-bell try it
glyphicon glyphicon-certificate try it
glyphicon glyphicon-thumbs-up try it
glyphicon glyphicon-thumbs-down try it
glyphicon glyphicon-hand-right try it
glyphicon glyphicon-hand-left try it
glyphicon glyphicon-hand-up try it
glyphicon glyphicon-hand-down try it
glyphicon glyphicon-circle-arrow-right try it
glyphicon glyphicon-circle-arrow-left try it
glyphicon glyphicon-circle-arrow-up try it
glyphicon glyphicon-circle-arrow-down try it
glyphicon glyphicon-globe try it
glyphicon glyphicon-wrench try it
glyphicon glyphicon-tasks try it
glyphicon glyphicon-filter try it
glyphicon glyphicon-briefcase try it
glyphicon glyphicon-fullscreen try it
glyphicon glyphicon-dashboard try it
glyphicon glyphicon-paperclip try it
glyphicon glyphicon-heart-empty try it
glyphicon glyphicon-link try it
glyphicon glyphicon-phone try it
glyphicon glyphicon-pushpin try it
glyphicon glyphicon-usd try it
glyphicon glyphicon-gbp try it
glyphicon glyphicon-sort try it
glyphicon glyphicon-sort-by-alphabet try it
glyphicon glyphicon-sort-by-alphabet-alt try it
glyphicon glyphicon-sort-by-order try it
glyphicon glyphicon-sort-by-order-alt try it
glyphicon glyphicon-sort-by-attributes try it
glyphicon glyphicon-sort-by-attributes-alt try it
glyphicon glyphicon-unchecked try it
glyphicon glyphicon-expand try it
glyphicon glyphicon-collapse-down try it
glyphicon glyphicon-collapse-up try it
glyphicon glyphicon-log-in try it
glyphicon glyphicon-flash try it
glyphicon glyphicon-log-out try it
glyphicon glyphicon-new-window try it
glyphicon glyphicon-record try it
glyphicon glyphicon-save try it
glyphicon glyphicon-open try it
glyphicon glyphicon-saved try it
glyphicon glyphicon-import try it
glyphicon glyphicon-export try it
glyphicon glyphicon-send try it
glyphicon glyphicon-floppy-disk try it
glyphicon glyphicon-floppy-saved try it
glyphicon glyphicon-floppy-remove try it
glyphicon glyphicon-floppy-save try it
glyphicon glyphicon-floppy-open try it
glyphicon glyphicon-credit-card try it
glyphicon glyphicon-transfer try it
glyphicon glyphicon-cutlery try it
glyphicon glyphicon-header try it
glyphicon glyphicon-compressed try it
glyphicon glyphicon-earphone try it
glyphicon glyphicon-phone-alt try it
glyphicon glyphicon-tower try it
glyphicon glyphicon-stats try it
glyphicon glyphicon-sd-video try it
glyphicon glyphicon-hd-video try it
glyphicon glyphicon-subtitles try it
glyphicon glyphicon-sound-stereo try it
glyphicon glyphicon-sound-dolby try it
glyphicon glyphicon-sound-5-1 try it
glyphicon glyphicon-sound-6-1 try it
glyphicon glyphicon-sound-7-1 try it
glyphicon glyphicon-copyright-mark try it
glyphicon glyphicon-registration-mark try it
glyphicon glyphicon-cloud-download try it
glyphicon glyphicon-cloud-upload try it
glyphicon glyphicon-tree-conifer try it
glyphicon glyphicon-tree-deciduous try it

Related

How to create an actionlink with a twitter bootstrap icon?

Bootstrap navigation bar

Bootstrap page title

Bootstrap carousel plug-in

Bootstrap UI Editor

How is aria hidden used in twitter bootstrap?

Bootstrap CSS coding specification

Bootstrap HTML encoding specification

Bootstrap warning

Bootstrap Well