- Web Icons Tutorial
- Web Icons - Home
- Web Icons - Introduction
- Font Awesome
- Font Awesome Icons
- Font Awesome - Web Icons
- Font Awesome - Hand Icons
- Font Awesome - Transportation Icons
- Font Awesome - Gender Icons
- Font Awesome - File Type Icons
- Font Awesome - Spinner Icons
- Font Awesome - Form Control Icons
- Font Awesome - Payment Icons
- Font Awesome - Chart Icons
- Font Awesome - Currency Icons
- Font Awesome - Text Editor Icons
- Font Awesome - Directional Icons
- Font Awesome - Video Player Icons
- Font Awesome - Brand Icons
- Font Awesome - Medical Icons
- Material Icons
- Material Icons
- Material - Action Icons
- Material - Alert Icons
- Material - AV Icons
- Material - Communication Icons
- Material - Content Icons
- Material - Device Icons
- Material - Editor Icons
- Material - File Icons
- Material - Hardware Icons
- Material - Image Icons
- Material - Maps Icons
- Material - Navigation Icons
- Material - Notification Icons
- Material - Social Icons
- Material - Toggle Icons
- Bootstrap Glyphicons
- Bootstrap Glyphicons
- Bootstrap - Components
- Web Icons Useful Resources
- Web Icons - Quick Guide
- Web Icons - Useful Resources
- Web Icons - Discussion
Bootstrap Components
This chapter explains the usage of Bootstrap Glyphicons (Components). Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<i.custom {font-size: 2em; color: blue;}>
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous custom"></i>
</body>
</html>
The following table contains the usage and results of Bootstrap Glyphicons (Components). Replace the < body > tag of the above program with the code given in the table to get the respective outputs −
| Usage | Result |
|---|---|
| <i class="glyphicon glyphicon-asterisk custom"></i> | |
| <i class="glyphicon glyphicon-plus custom"></i> | |
| <i class="glyphicon glyphicon-euro custom"></i> | |
| <i class="glyphicon glyphicon-minus custom"></i> | |
| <i class="glyphicon glyphicon-cloud custom"></i> | |
| <i class="glyphicon glyphicon-envelope custom"></i> | |
| <i class="glyphicon glyphicon-pencil custom"></i> | |
| <i class="glyphicon glyphicon-glass custom"></i> | |
| <i class="glyphicon glyphicon-music custom"></i> | |
| <i class="glyphicon glyphicon-search custom"></i> | |
| <i class="glyphicon glyphicon-heart custom"></i> | |
| <i class="glyphicon glyphicon-star custom"></i> | |
| <i class="glyphicon glyphicon-star-empty custom"></i> | |
| <i class="glyphicon glyphicon-user custom"></i> | |
| <i class="glyphicon glyphicon-film custom"></i> | |
| <i class="glyphicon glyphicon-th-large custom"></i> | |
| <i class="glyphicon glyphicon-th custom"></i> | |
| <i class="glyphicon glyphicon-th-list custom"></i> | |
| <i class="glyphicon glyphicon-ok custom"></i> | |
| <i class="glyphicon glyphicon-remove custom"></i> | |
| <i class="glyphicon glyphicon-zoom-in custom"></i> | |
| <i class="glyphicon glyphicon-zoom-out custom"></i> | |
| <i class="glyphicon glyphicon-off custom"></i> | |
| <i class="glyphicon glyphicon-signal custom"></i> | |
| <i class="glyphicon glyphicon-cog custom"></i> | |
| <i class="glyphicon glyphicon-trash custom"></i> | |
| <i class="glyphicon glyphicon-home custom"></i> | |
| <i class="glyphicon glyphicon-file custom"></i> | |
| <i class="glyphicon glyphicon-time custom"></i> | |
| <i class="glyphicon glyphicon-road custom"></i> | |
| <i class="glyphicon glyphicon-download-alt custom"></i> | |
| <i class="glyphicon glyphicon-download custom"></i> | |
| <i class="glyphicon glyphicon-upload custom"></i> | |
| <i class="glyphicon glyphicon-inbox custom"></i> | |
| <i class="glyphicon glyphicon-play-circle custom"></i> | |
| <i class="glyphicon glyphicon-repeat custom"></i> | |
| <i class="glyphicon glyphicon-refresh custom"></i> | |
| <i class="glyphicon glyphicon-list-alt custom"></i> | |
| <i class="glyphicon glyphicon-lock custom"></i> | |
| <i class="glyphicon glyphicon-flag custom"></i> | |
| <i class="glyphicon glyphicon-headphones custom"></i> | |
| <i class="glyphicon glyphicon-volume-off custom"></i> | |
| <i class="glyphicon glyphicon-volume-down custom"></i> | |
| <i class="glyphicon glyphicon-volume-up custom"></i> | |
| <i class="glyphicon glyphicon-qrcode custom"></i> | |
| <i class="glyphicon glyphicon-barcode custom"></i> | |
| <i class="glyphicon glyphicon-tag custom"></i> | |
| <i class="glyphicon glyphicon-tags custom"></i> | |
| <i class="glyphicon glyphicon-book custom"></i> | |
| <i class="glyphicon glyphicon-bookmark custom"></i> | |
| <i class="glyphicon glyphicon-print custom"></i> | |
| <i class="glyphicon glyphicon-camera custom"></i> | |
| <i class="glyphicon glyphicon-font custom"></i> | |
| <i class="glyphicon glyphicon-bold custom"></i> | |
| <i class="glyphicon glyphicon-italic custom"></i> | |
| <i class="glyphicon glyphicon-text-height custom"></i> | |
| <i class="glyphicon glyphicon-text-width custom"></i> | |
| <i class="glyphicon glyphicon-align-left custom"></i> | |
| <i class="glyphicon glyphicon-align-center custom"></i> | |
| <i class="glyphicon glyphicon-align-right custom"></i> | |
| <i class="glyphicon glyphicon-align-justify custom"></i> | |
| <i class="glyphicon glyphicon-list custom"></i> | |
| <i class="glyphicon glyphicon-indent-left custom"></i> | |
| <i class="glyphicon glyphicon-indent-right custom"></i> | |
| <i class="glyphicon glyphicon-facetime-video custom"></i> | |
| <i class="glyphicon glyphicon-picture custom"></i> | |
| <i class="glyphicon glyphicon-map-marker custom"></i> | |
| <i class="glyphicon glyphicon-adjust custom"></i> | |
| <i class="glyphicon glyphicon-tint custom"></i> | |
| <i class="glyphicon glyphicon-edit custom"></i> | |
| <i class="glyphicon glyphicon-share custom"></i> | |
| <i class="glyphicon glyphicon-check custom"></i> | |
| <i class="glyphicon glyphicon-move custom"></i> | |
| <i class="glyphicon glyphicon-step-backward custom"></i> | |
| <i class="glyphicon glyphicon-fast-backward custom"></i> | |
| <i class="glyphicon glyphicon-backward custom"></i> | |
| <i class="glyphicon glyphicon-play custom"></i> | |
| <i class="glyphicon glyphicon-pause custom"></i> | |
| <i class="glyphicon glyphicon-stop custom"></i> | |
| <i class="glyphicon glyphicon-forward custom"></i> | |
| <i class="glyphicon glyphicon-fast-forward custom"></i> | |
| <i class="glyphicon glyphicon-step-forward custom"></i> | |
| <i class="glyphicon glyphicon-eject custom"></i> | |
| <i class="glyphicon glyphicon-chevron-left custom"></i> | |
| <i class="glyphicon glyphicon-chevron-right custom"></i> | |
| <i class="glyphicon glyphicon-plus-sign custom"></i> | |
| <i class="glyphicon glyphicon-minus-sign custom"></i> | |
| <i class="glyphicon glyphicon-remove-sign custom"></i> | |
| <i class="glyphicon glyphicon-ok-sign custom"></i> | |
| <i class="glyphicon glyphicon-question-sign custom"></i> | |
| <i class="glyphicon glyphicon-info-sign custom"></i> | |
| <i class="glyphicon glyphicon-screenshot custom"></i> | |
| <i class="glyphicon glyphicon-remove-circle custom"></i> | |
| <i class="glyphicon glyphicon-ok-circle custom"></i> | |
| <i class="glyphicon glyphicon-ban-circle custom"></i> | |
| <i class="glyphicon glyphicon-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-share-alt custom"></i> | |
| <i class="glyphicon glyphicon-resize-full custom"></i> | |
| <i class="glyphicon glyphicon-resize-small custom"></i> | |
| <i class="glyphicon glyphicon-exclamation-sign custom"></i> | |
| <i class="glyphicon glyphicon-gift custom"></i> | |
| <i class="glyphicon glyphicon-leaf custom"></i> | |
| <i class="glyphicon glyphicon-fire custom"></i> | |
| <i class="glyphicon glyphicon-eye-open custom"></i> | |
| <i class="glyphicon glyphicon-eye-close custom"></i> | |
| <i class="glyphicon glyphicon-warning-sign custom"></i> | |
| <i class="glyphicon glyphicon-plane custom"></i> | |
| <i class="glyphicon glyphicon-calendar custom"></i> | |
| <i class="glyphicon glyphicon-random custom"></i> | |
| <i class="glyphicon glyphicon-comment custom"></i> | |
| <i class="glyphicon glyphicon-magnet custom"></i> | |
| <i class="glyphicon glyphicon-chevron-up custom"></i> | |
| <i class="glyphicon glyphicon-chevron-down custom"></i> | |
| <i class="glyphicon glyphicon-retweet custom"></i> | |
| <i class="glyphicon glyphicon-shopping-cart custom"></i> | |
| <i class="glyphicon glyphicon-folder-close custom"></i> | |
| <i class="glyphicon glyphicon-folder-open custom"></i> | |
| <i class="glyphicon glyphicon-resize-vertical custom"></i> | |
| <i class="glyphicon glyphicon-resize-horizontal custom"></i> | |
| <i class="glyphicon glyphicon-hdd custom"></i> | |
| <i class="glyphicon glyphicon-bullhorn custom"></i> | |
| <i class="glyphicon glyphicon-bell custom"></i> | |
| <i class="glyphicon glyphicon-certificate custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-up custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-down custom"></i> | |
| <i class="glyphicon glyphicon-hand-right custom"></i> | |
| <i class="glyphicon glyphicon-hand-left custom"></i> | |
| <i class="glyphicon glyphicon-hand-up custom"></i> | |
| <i class="glyphicon glyphicon-hand-down custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-globe custom"></i> | |
| <i class="glyphicon glyphicon-wrench custom"></i> | |
| <i class="glyphicon glyphicon-tasks custom"></i> | |
| <i class="glyphicon glyphicon-filter custom"></i> | |
| <i class="glyphicon glyphicon-briefcase custom"></i> | |
| <i class="glyphicon glyphicon-fullscreen custom"></i> | |
| <i class="glyphicon glyphicon-dashboard custom"></i> | |
| <i class="glyphicon glyphicon-paperclip custom"></i> | |
| <i class="glyphicon glyphicon-heart-empty custom"></i> | |
| <i class="glyphicon glyphicon-link custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-pushpin custom"></i> | |
| <i class="glyphicon glyphicon-usd custom"></i> | |
| <i class="glyphicon glyphicon-gbp custom"></i> | |
| <i class="glyphicon glyphicon-sort custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i> | |
| <i class="glyphicon glyphicon-unchecked custom"></i> | |
| <i class="glyphicon glyphicon-expand custom"></i> | |
| <i class="glyphicon glyphicon-collapse-down custom"></i> | |
| <i class="glyphicon glyphicon-collapse-up custom"></i> | |
| <i class="glyphicon glyphicon-log-in custom"></i> | |
| <i class="glyphicon glyphicon-flash custom"></i> | |
| <i class="glyphicon glyphicon-log-out custom"></i> | |
| <i class="glyphicon glyphicon-new-window custom"></i> | |
| <i class="glyphicon glyphicon-record custom"></i> | |
| <i class="glyphicon glyphicon-save custom"></i> | |
| <i class="glyphicon glyphicon-open custom"></i> | |
| <i class="glyphicon glyphicon-saved custom"></i> | |
| <i class="glyphicon glyphicon-import custom"></i> | |
| <i class="glyphicon glyphicon-export custom"></i> | |
| <i class="glyphicon glyphicon-send custom"></i> | |
| <i class="glyphicon glyphicon-floppy-disk custom"></i> | |
| <i class="glyphicon glyphicon-floppy-saved custom"></i> | |
| <i class="glyphicon glyphicon-floppy-remove custom"></i> | |
| <i class="glyphicon glyphicon-floppy-save custom"></i> | |
| <i class="glyphicon glyphicon-floppy-open custom"></i> | |
| <i class="glyphicon glyphicon-credit-card custom"></i> | |
| <i class="glyphicon glyphicon-transfer custom"></i> | |
| <i class="glyphicon glyphicon-cutlery custom"></i> | |
| <i class="glyphicon glyphicon-header custom"></i> | |
| <i class="glyphicon glyphicon-compressed custom"></i> | |
| <i class="glyphicon glyphicon-earphone custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-tower custom"></i> | |
| <i class="glyphicon glyphicon-stats custom"></i> | |
| <i class="glyphicon glyphicon-sd-video custom"></i> | |
| <i class="glyphicon glyphicon-hd-video custom"></i> | |
| <i class="glyphicon glyphicon-subtitles custom"></i> | |
| <i class="glyphicon glyphicon-sound-stereo custom"></i> | |
| <i class="glyphicon glyphicon-sound-dolby custom"></i> | |
| <i class="glyphicon glyphicon-sound-5-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-6-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-7-1 custom"></i> | |
| <i class="glyphicon glyphicon-copyright-mark custom"></i> | |
| <i class="glyphicon glyphicon-registration-mark custom"></i> | |
| <i class="glyphicon glyphicon-cloud-download custom"></i> | |
| <i class="glyphicon glyphicon-cloud-upload custom"></i> | |
| <i class="glyphicon glyphicon-tree-conifer custom"></i> | |
| <i class="glyphicon glyphicon-tree-deciduous custom"></i> |
Advertisements