English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This chapter will explain font icons (Glyphicons) and learn about their usage through some examples. Bootstrap bundles 2Over 00 font formats. First, let's understand what font icons are.
Font icons are icon fonts used in web projects. Although,Glyphicons Halflings Commercial license is required, but you can use these icons for free based on the Bootstrap project.
To express gratitude to the icon authors, please include the link to the GLYPHICONS website when using them.
We have already Environment installation section downloaded Bootstrap 3Understand the directory structure of the .x version, and in the fonts Font icons can be found in the folder, which includes the following files:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
The related CSS rules are written in dist The css file is located within the folder. bootstrap.css bootstrap.css bootstrap-and min.css
CSS rule explanation
The following CSS rules make up the glyphicon class.
Example
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">/<title>Navigation bar font icon<
title>-<meta name="viewport" content="width=device-width, initial1scale=
<!-- .0"> -->
Bootstrap//cdn.staticfile.org/twitter-bootstrap/3.3.7/<link rel="stylesheet" href="https:/css
bootstrap.min.css">
<style>
top:-body { 5left:
top:-padding 5left:
0px;
</}
<!--style> 9[if lt IE
<script src="https://]>/apps.bdimg.com/shiv5libs/3.7/shiv5html/script>
shiv.min.js"><-->
</<![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-collapse">
target=".navbar-<span class="sr/bar"><
only">Toggle navigation<-<span class="icon/bar"><
only">Toggle navigation<-<span class="icon/bar"><
only">Toggle navigation<-<span class="icon/bar"><
</button>
span>-<a class="navbar/a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home/span> Home</a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart></span> Shop</a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones></span> Support</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap plugins need to be introduced) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- contains all compiled plugins -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>test and see ‹/›We have seen how to use font icons, next let's see 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.
Below is the starting code:
<button type="button"> <span></span> User </button>
The effect is as shown below:
By increasing or decreasing the font size of the icons, you can make the icons look larger or smaller.
<button type="button" style="font-size: 60px"> <span></span> User </button>
<button type="button" style="color: rgb(212, 106, 64);"> <span></span> User </button>
<button type="button" style="text-shadow: black 5px 3px 3px;"> <span></span> User </button>
click here to customize font icons >>
| icon | class name | example |
|---|---|---|
| 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-QR code | 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 |