Web Icons - Introduction
An icon is a symbol that is used to represent a specific action or a
capability on a webpage. Icons are used in documents as well as
applications and they can be either selec
table or non-selectable. For
example, the images that we see on the buttons of an application are all
icons and these buttons are selectable. Similarly, when we use an icon
as a company logo, it is normally non-selectable.
In Windows environment, if we mute the system volume, it will be represented with the help of an icon, as shown below.
Using web icons, we can represent a loading page, a disabled option, a
link, a redirection, etc. These icons can be flipped, rotated, resized,
bordered, inverted, and colored.
Icon Fonts
Icon Fonts contain symbols and glyphs. Once you load a desired font,
you can use any of the icons provided by that font using the class name
of the icon. We can also apply different colors to the icons and resize
them using the CSS properties. There are several icon libraries(fonts)
that provide icons. This tutorial focuses on three main fonts, namely −
- Font Awesome
- Bootstrap Glyphicons
- Google's Material Icons
Font Awesome
This font provides 519 free scalable vector icons. This library is
completely free, for both personal as well as commercial use. These
icons can be customized easily. Originally, they were developed for
Bootstrap.
Bootstrap Glyphicons
This is a library of monochromatic icons available in raster image
formats, vector image formats, and as fonts. It provides over 250 glyphs
in font format. You can use these fonts in your web projects. These
icons are not free, however you can use them in Bootstrap based projects
without having to purchase them.
Google's Material Icons
Google provides about 750 icons designed under "material designed guidelines" and these are known as
Material Design
icons. These icons are simple and they support all modern web browsers.
Since these icons are vector based, they are scalable as well. To use
these icons, we have to load the font (library)
material-icons.
Font Awesome Icons
Font Awesome icons library provides 519 free scalable vector icons.
This library is completely free for both personal and commercial use.
Originally designed for Bootstrap, these icons can be customized easily.
Loading the Font Library
To load the Font Awesome library, copy and paste the following line in the <head> section of the webpage.
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
Using the Icon
Font Awesome provides several icons. Choose one of them and add the
name of the icon class to any HTML element within the < body >
tag. In the following example, we have used the icon of the Indian
currency.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<i class = "fa fa-inr"></i>
</body>
</html>
It will produce the following output −
Defining the Size
You can increase or decrease the size of an icon by defining its size
using CSS and using it along with the class name, as shown below. In
the given example, we have declared the size as 6 em.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.mysize {font-size: 10em;}
</style>
</head>
<body>
<i class = "fa fa-inr mysize"></i>
</body>
</html>
It will produce the following output −
Defining the Color
Just like size, you can define the color of the icons using CSS. The
following example shows how to change the color of the Indian currency
icon.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 6em; color: red;}
</style>
</head>
<body>
<i class = "fa fa-inr custom"></i>
</body>
</html>
List of Categories
Font Awesome provides 519 icons in the following categories −
- Web Application Icons
- Hand Icons
- Transportation Icons
- Gender Icons
- File Type Icons
- Spinner Icons
- Form Control Icons
- Payment Icons
- Chart Icons
- Currency Icons
- Text editor Icons
- Directional Icons
- Video Player Icons
- Brand Icons
To use any of these icons, you have to replace the class name in the
programs given in this chapter with the class name of the desired icon.
In the coming chapters of this Unit (Font Awesome), we have explained
category-wise the usage and the respective outputs of various Font
Awesome icons.
Font Awesome - Web Application Icons
This chapter explains the usage of Font Awesome Web Application icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Web Application icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class= "fa fa-adjust custom"></i> |
|
| <i class="fa fa-anchor custom"></i> |
|
| <i class="fa fa-archive custom"></i> |
|
| <i class="fa fa-area-chart custom"></i> |
|
| <i class="fa fa-arrows custom"></i> |
|
| <i class="fa fa-arrows-h custom"></i> |
|
| <i class="fa fa-arrows-v custom"></i> |
|
| <i class="fa fa-asterisk custom"></i> |
|
| <i class="fa fa-at custom"></i> |
|
| <i class="fa fa-automobile custom"></i> |
|
| <i class="fa fa-balance-scale custom"></i> |
|
| <i class="fa fa-ban custom"></i> |
|
| <i class="fa fa-bank custom"></i> |
|
| <i class="fa fa-bar-chart custom"></i> |
|
| <i class="fa fa-bar-chart-o custom"></i> |
|
| <i class="fa fa-barcode custom"></i> |
|
| <i class="fa fa-bars custom"></i> |
|
| <i class="fa fa-bed custom"></i> |
|
| <i class="fa fa-beer custom"></i> |
|
| <i class="fa fa-bell custom"></i> |
|
| <i class="fa fa-wrench custom"></i> |
|
| <i class="fa fa-bell-o custom"></i> |
|
| <i class="fa fa-bell-slash custom"></i> |
|
| <i class="fa fa-bell-slash-o custom"></i> |
|
| <i class="fa fa-bicycle custom"></i> |
|
| <i class="fa fa-battery-0 custom"></i> |
|
| <i class="fa fa-battery-1 custom"></i> |
|
| <i class="fa fa-battery-2 custom"></i> |
|
| <i class="fa fa-battery-3 custom"></i> |
|
| <i class="fa fa-battery-4 custom"></i> |
|
| <i class="fa fa-battery-empty custom"></i> |
|
| <i class="fa fa-battery-quarter custom"></i> |
|
| <i class="fa fa-battery-half custom"></i> |
|
| <i class="fa fa-battery-three-quarters custom"></i> |
|
| <i class="fa fa-battery-full custom"></i> |
|
| <i class="fa fa-birthday-cake custom"></i> |
|
| <i class="fa fa-bolt custom"></i> |
|
| <i class="fa fa-bomb custom"></i> |
|
| <i class="fa fa-book custom"></i> |
|
| <i class="fa fa-bookmark custom"></i> |
|
| <i class="fa fa-bookmark-o custom"></i> |
|
| <i class="fa fa-briefcase custom"></i> |
|
| <i class="fa fa-bug custom"></i> |
|
| <i class="fa fa-building custom"></i> |
|
| <i class="fa fa-building-o custom"></i> |
|
| <i class="fa fa-bullhorn custom"></i> |
|
| <i class="fa fa-bullseye custom"></i> |
|
| <i class="fa fa-bus custom"></i> |
|
| <i class="fa fa-cab custom"></i> |
|
| <i class="fa fa-video-camera custom"></i> |
|
| <i class="fa fa-calendar custom"></i> |
|
| <i class="fa fa-calendar-check-o custom"></i> |
|
| <i class="fa fa-calendar-minus-o custom"></i> |
|
| <i class="fa fa-calendar-o custom"></i> |
|
| <i class="fa fa-calendar-plus-o custom"></i> |
|
| <i class="fa fa-calendar-times-o custom"></i> |
|
| <i class="fa fa-camera custom"></i> |
|
| <i class="fa fa-camera-retro custom"></i> |
|
| <i class="fa fa-car custom"></i> |
|
| <i class="fa fa-cc custom"></i> |
|
| <i class="fa fa-caret-square-o-down custom"></i> |
|
| <i class="fa fa-caret-square-o-left custom"></i> |
|
| <i class="fa fa-caret-square-o-right custom"></i> |
|
| <i class="fa fa-caret-square-o-up custom"></i> |
|
| <i class="fa fa-cart-arrow-down custom"></i> |
|
| <i class="fa fa-cart-plus custom"></i> |
|
| <i class="fa fa-certificate custom"></i> |
|
| <i class="fa fa-child custom"></i> |
|
| <i class="fa fa-check custom"></i> |
|
| <i class="fa fa-check-circle custom"></i> |
|
| <i class="fa fa-check-circle-o custom"></i> |
|
| <i class="fa fa-check-square custom"></i> |
|
| <i class="fa fa-check-square-o custom"></i> |
|
| <i class="fa fa-circle custom"></i> |
|
| <i class="fa fa-circle-o custom"></i> |
|
| <i class="fa fa-circle-o-notch custom"></i> |
|
| <i class="fa fa-circle-thin custom"></i> |
|
| <i class="fa fa-clock-o custom"></i> |
|
| <i class="fa fa-clone custom"></i> |
|
| <i class="fa fa-close custom"></i> |
|
| <i class="fa fa-anchor custom"></i> |
|
| <i class="fa fa-cloud-download custom"></i> |
|
| <i class="fa fa-cloud-upload custom"></i> |
|
| <i class="fa fa-code custom"></i> |
|
| <i class="fa fa-code-fork custom"></i> |
|
| <i class="fa fa-coffee custom"></i> |
|
| <i class="fa fa-cog custom"></i> |
|
| <i class="fa fa-cogs custom"></i> |
|
| <i class="fa fa-comment custom"></i> |
|
| <i class="fa fa-comment-o custom"></i> |
|
| <i class="fa fa-commenting custom"></i> |
|
| <i class="fa fa-commenting-o custom"></i> |
|
| <i class="fa fa-comments custom"></i> |
|
| <i class="fa fa-comments-o custom"></i> |
|
| <i class="fa fa-compass custom"></i> |
|
| <i class="fa fa-copyright custom"></i> |
|
| <i class="fa fa-creative-commons custom"></i> |
|
| <i class="fa fa-credit-card custom"></i> |
|
| <i class="fa fa-crop custom"></i> |
|
| <i class="fa fa-crosshairs custom"></i> |
|
| <i class="fa fa-cube custom"></i> |
|
| <i class="fa fa-cubes custom"></i> |
|
| <i class="fa fa-cutlery custom"></i> |
|
| <i class="fa fa-dashboard custom"></i> |
|
| <i class="fa fa-database custom"></i> |
|
| <i class="fa fa-desktop custom"></i> |
|
| <i class="fa fa-diamond custom"></i> |
|
| <i class="fa fa-dot-circle-o custom"></i> |
|
| <i class="fa fa-download custom"></i> |
|
| <i class="fa fa-edit custom"></i> |
|
| <i class="fa fa-ellipsis-h custom"></i> |
|
| <i class="fa fa-ellipsis-v custom"></i> |
|
| <i class="fa fa-envelope custom"></i> |
|
| <i class="fa fa-envelope-o custom"></i> |
|
| <i class="fa fa-envelope-square custom"></i> |
|
| <i class="fa fa-eraser custom"></i> |
|
| <i class="fa fa-exchange custom"></i> |
|
| <i class="fa fa-exclamation custom"></i> |
|
| <i class="fa fa-exclamation-circle custom"></i> |
|
| <i class="fa fa-exclamation-triangle custom"></i> |
|
| <i class="fa fa-external-link custom"></i> |
|
| <i class="fa fa-external-link-square custom"></i> |
|
| <i class="fa fa-eye custom"></i> |
|
| <i class="fa fa-eye-slash custom"></i> |
|
| <i class="fa fa-eyedropper custom"></i> |
|
| <i class="fa fa-fax custom"></i> |
|
| <i class="fa fa-feed custom"></i> |
|
| <i class="fa fa-female custom"></i> |
|
| <i class="fa fa-fighter-jet custom"></i> |
|
| <i class="fa fa-file-archive-o custom"></i> |
|
| <i class="fa fa-file-audio-o custom"></i> |
|
| <i class="fa fa-file-code-o custom"></i> |
|
| <i class="fa fa-file-excel-o custom"></i> |
|
| <i class="fa fa-volume-down custom"></i> |
|
| <i class="fa fa-file-movie-o custom"></i> |
|
| <i class="fa fa-file-pdf-o custom"></i> |
|
| <i class="fa fa-file-photo-o custom"></i> |
|
| <i class="fa fa-file-picture-o custom"></i> |
|
| <i class="fa fa-file-powerpoint-o custom"></i> |
|
| <i class="fa fa-file-sound-o custom"></i> |
|
| <i class="fa fa-file-video-o custom"></i> |
|
| <i class="fa fa-file-word-o custom"></i> |
|
| <i class="fa fa-file-sound-o custom"></i> |
|
| <i class="fa fa-file-video-o custom"></i> |
|
| <i class="fa fa-file-word-o custom"></i> |
|
| <i class="fa fa-file-zip-o custom"></i> |
|
| <i class="fa fa-film custom"></i> |
|
| <i class="fa fa-filter custom"></i> |
|
| <i class="fa fa-fire custom"></i> |
|
| <i class="fa fa-fire-extinguisher custom"></i> |
|
| <i class="fa fa-flag custom"></i> |
|
| <i class="fa fa-flag-checkered custom"></i> |
|
| <i class="fa fa-flag-o custom"></i> |
|
| <i class="fa fa-flash custom"></i> |
|
| <i class="fa fa-flask custom"></i> |
|
| <i class="fa fa-flask custom"><lt;/i> |
|
| <i class="fa fa-folder custom"></i> |
|
| <i class="fa fa-folder-o custom"></i> |
|
| <i class="fa fa-folder-open custom"></i> |
|
| <i class="fa fa-folder-open-o custom"></i> |
|
| <i class="fa fa-frown-o custom"></i> |
|
| <i class="fa fa-volume-off custom"></i> |
|
| <i class="fa fa-gamepad custom"></i> |
|
| <i class="fa fa-gavel custom"></i> |
|
| <i class="fa fa-gear custom"></i> |
|
| <i class="fa fa-gears custom"></i> |
|
| <i class="fa fa-gift custom"></i> |
|
| <i class="fa fa-glass custom"></i> |
|
| <i class="fa fa-globe custom"></i> |
|
| <i class="fa fa-graduation-cap custom"></i> |
|
| <i class="fa fa-group custom"></i> |
|
| <i class="fa fa-hand-grab-o custom"></i> |
|
| <i class="fa fa-hand-lizard-o custom"></i> |
|
| <i class="fa fa-hand-paper-o custom"></i> |
|
| <i class="fa fa-hand-peace-o custom"></i> |
|
| <i class="fa fa-hand-pointer-o custom"></i> |
|
| <i class="fa fa-hand-rock-o custom"></i> |
|
| <i class="fa fa-hand-scissors-o custom"></i> |
|
| <i class="fa fa-hand-spock-o custom"></i> |
|
| <i class="fa fa-hand-paper-o custom"></i> |
|
| <i class="fa fa-hdd-o custom"></i> |
|
| <i class="fa fa-headphones custom"></i> |
|
| <i class="fa fa-heart custom"></i> |
|
| <i class="fa fa-heart-o custom"></i> |
|
| <i class="fa fa-heartbeat custom"></i> |
|
| <i class="fa fa-history custom"></i> |
|
| <i class="fa fa-home custom"></i> |
|
| <i class="fa fa-hotel custom"></i> |
|
| <i class="fa fa-hourglass custom"></i> |
|
| <i class="fa fa-hourglass-start custom"></i> |
|
| <i class="fa fa-hourglass-half custom"></i> |
|
| <i class="fa fa-hourglass-end custom"></i> |
|
| <i class="fa fa-i-cursor custom"></i> |
|
| <i class="fa fa-image custom"></i> |
|
| <i class="fa fa-inbox custom"></i> |
|
| <i class="fa fa-industry custom"></i> |
|
| <i class="fa fa-info custom"></i> |
|
| <i class="fa fa-info-circle custom"></i> |
|
| <i class="fa fa-institution custom"></i> |
|
| <i class="fa fa-key custom"></i> |
|
| <i class="fa fa-keyboard-o custom"></i> |
|
| <i class="fa fa-language custom"></i> |
|
| <i class="fa fa-laptop custom"></i> |
|
| <i class="fa fa-leaf custom"></i> |
|
| <i class="fa fa-legal custom"></i> |
|
| <i class="fa fa-lemon-o custom"></i> |
|
| <i class="fa fa-level-down custom"></i> |
|
| <i class="fa fa-level-up custom"></i> |
|
| <i class="fa fa-life-bouy custom"></i> |
|
| <i class="fa fa-life-ring custom"></i> |
|
| <i class="fa fa-life-saver custom"></i> |
|
| <i class="fa fa-lightbulb-o custom"></i> |
|
| <i class="fa fa-line-chart custom"></i> |
|
| <i class="fa fa-location-arrow custom"></i> |
|
| <i class="fa fa-lock custom"></i> |
|
| <i class="fa fa-magic custom"></i> |
|
| <i class="fa fa-magnet custom"></i> |
|
| <i class="fa fa-mail-forward custom"></i> |
|
| <i class="fa fa-mail-reply custom"></i> |
|
| <i class="fa fa-mail-reply-all custom"></i> |
|
| <i class="fa fa-male custom"></i> |
|
| <i class="fa fa-map custom"></i> |
|
| <i class="fa fa-map-marker custom"></i> |
|
| <i class="fa fa-map-o custom"></i> |
|
| <i class="fa fa-map-pin custom"></i> |
|
| <i class="fa fa-map-signs custom"></i> |
|
| <i class="fa fa-meh-o custom"></i> |
|
| <i class="fa fa-microphone custom"></i> |
|
| <i class="fa fa-microphone-slash custom"></i> |
|
| <i class="fa fa-minus custom"></i> |
|
| <i class="fa fa-minus-circle custom"></i> |
|
| <i class="fa fa-minus-square custom"></i> |
|
| <i class="fa fa-minus-square-o custom"></i> |
|
| <i class="fa fa-mobile custom"></i> |
|
| <i class="fa fa-money custom"></i> |
|
| <i class="fa fa-moon-o custom"></i> |
|
| <i class="fa fa-mortar-board custom"></i> |
|
| <i class="fa fa-motorcycle custom"></i> |
|
| <i class="fa fa-mouse-pointer custom"></i> |
|
| <i class="fa fa-music custom"></i> |
|
| <i class="fa fa-users custom"></i> |
|
| <i class="fa fa-object-group custom"></i> |
|
| <i class="fa fa-object-ungroup custom"></i> |
|
| <i class="fa fa-paint-brush custom"></i> |
|
| <i class="fa fa-paper-plane custom"></i> |
|
| <i class="fa fa-paper-plane-o custom"></i> |
|
| <i class="fa fa-paw custom"></i> |
|
| <i class="fa fa-pencil custom"></i> |
|
| <i class="fa fa-pencil-square custom"></i> |
|
| <i class="fa fa-pencil-square-o custom"></i> |
|
| <i class="fa fa-phone custom"></i> |
|
| <i class="fa fa-phone custom"></i> |
|
| <i class="fa fa-photo custom"></i> |
|
| <i class="fa fa-picture-o custom"></i> |
|
| <i class="fa fa-pie-chart custom"></i> |
|
| <i class="fa fa-plane custom"></i> |
|
| <i class="fa fa-volume-up custom"></i> |
|
| <i class="fa fa-plus custom"></i> |
|
| <i class="fa fa-plus-circle custom"></i> |
|
| <i class="fa fa-plus-square custom"></i> |
|
| <i class="fa fa-plus-square-o custom"></i> |
|
| <i class="fa fa-power-off custom"></i> |
|
| <i class="fa fa-print custom"></i> |
|
| <i class="fa fa-puzzle-piece custom"></i> |
|
| <i class="fa fa-qrcode custom"></i> |
|
| <i class="fa fa-question custom"></i> |
|
| <i class="fa fa-question-circle custom"></i> |
|
| <i class="fa fa-quote-left custom"></i> |
|
| <i class="fa fa-quote-right custom"></i> |
|
| <i class="fa fa-random custom"></i> |
|
| <i class="fa fa-recycle custom"></i> |
|
| <i class="fa fa-refresh custom"></i> |
|
| <i class="fa fa-registered custom"></i> |
|
| <i class="fa fa-remove custom"></i> |
|
| <i class="fa fa-reorder custom"></i> |
|
| <i class="fa fa-reply custom"></i> |
|
| <i class="fa fa-reply-all custom"></i> |
|
| <i class="fa fa-retweet custom"></i> |
|
| <i class="fa fa-road custom"></i> |
|
| <i class="fa fa-anchor custom"></i> |
|
| <i class="fa fa-rss custom"></i> |
|
| <i class="fa fa-rss-square custom"></i> |
|
| <i class="fa fa-search custom"></i> |
|
| <i class="fa fa-search-minus custom"></i> |
|
| <i class="fa fa-search-plus custom"></i> |
|
| <i class="fa fa-send custom"></i> |
|
| <i class="fa fa-send-o custom"></i> |
|
| <i class="fa fa-server custom"></i> |
|
| <i class="fa fa-share custom"></i> |
|
| <i class="fa fa-share-alt custom"></i> |
|
| <i class="fa fa-share-alt-square custom"></i> |
|
| <i class="fa fa-share-alt-o custom"></i> |
|
| <i class="fa fa-shield custom"></i> |
|
| <i class="fa fa-ship custom"></i> |
|
| <i class="fa fa-shopping-cart custom"></i> |
|
| <i class="fa fa-sign-in custom"></i> |
|
| <i class="fa fa-sign-out custom"></i> |
|
| <i class="fa fa-signal custom"></i> |
|
| <i class="fa fa-sitemap custom"></i> |
|
| <i class="fa fa-sliders custom"></i> |
|
| <i class="fa fa-smile-o custom"></i> |
|
| <i class="fa fa-warning custom"></i> |
|
| <i class="fa fa-sort custom"></i> |
|
| <i class="fa fa-sort-alpha-asc custom"></i> |
|
| <i class="fa fa-sort-alpha-desc custom"></i> |
|
| <i class="fa fa-sort-asc custom"></i> |
|
| <i class="fa fa-sort-desc custom"></i> |
|
| <i class="fa fa-sort-down custom"></i> |
|
| <i class="fa fa-sort-numeric-asc custom"></i> |
|
| <i class="fa fa-sort-numeric-desc custom"></i> |
|
| <i class="fa fa-sort-up custom"></i> |
|
| <i class="fa fa-space-shuttle custom"></i> |
|
| <i class="fa fa-spinner custom"></i> |
|
| <i class="fa fa-spoon custom"></i> |
|
| <i class="fa fa-square custom"></i> |
|
| <i class="fa fa-square-o custom"></i> |
|
| <i class="fa fa-star custom"></i> |
|
| <i class="fa fa-star-half custom"></i> |
|
| <i class="fa fa-star-half-empty custom"></i> |
|
| <i class="fa fa-star-half-full custom"></i> |
|
| <i class="fa fa-star-half-o custom"></i> |
|
| <i class="fa fa-star-o custom"></i> |
|
| <i class="fa fa-sticky-note custom"></i> |
|
| <i class="fa fa-sticky-note-o custom"></i> |
|
| <i class="fa fa-street-view custom"></i> |
|
| <i class="fa fa-suitcase custom"></i> |
|
| <i class="fa fa-sun-o custom"></i> |
|
| <i class="fa fa-support custom"></i> |
|
| <i class="fa fa-tablet custom"></i> |
|
| <i class="fa fa-tachometer custom"></i> |
|
| <i class="fa fa-tag custom"></i> |
|
| <i class="fa fa-tags custom"></i> |
|
| <i class="fa fa-tasks custom"></i> |
|
| <i class="fa fa-taxi custom"></i> |
|
| <i class="fa fa-television custom"></i> |
|
| <i class="fa fa-terminal custom"></i> |
|
| <i class="fa fa-thumb-tack custom"></i> |
|
| <i class="fa fa-thumbs-down custom"></i> |
|
| <i class="fa fa-ticket custom"></i> |
|
| <i class="fa fa-times custom"></i> |
|
| <i class="fa fa-times-circle custom"></i> |
|
| <i class="fa fa-times-circle-o custom"></i> |
|
| <i class="fa fa-tint custom"></i> |
|
| <i class="fa fa-toggle-down custom"></i> |
|
| <i class="fa fa-toggle-left custom"></i> |
|
| <i class="fa fa-toggle-off custom"></i> |
|
| <i class="fa fa-toggle-on custom"></i> |
|
| <i class="fa fa-toggle-right custom"></i> |
|
| <i class="fa fa-toggle-up custom"></i> |
|
| <i class="fa fa-trademark custom"></i> |
|
| <i class="fa fa-tras custom"></i> |
|
| <i class="fa fa-trash-o custom"></i> |
|
| <i class="fa fa-tree custom"></i> |
|
| <i class="fa fa-trophy custom"></i> |
|
| <i class="fa fa-truck custom"></i> |
|
| <i class="fa fa-wheelchair custom"></i> |
|
| <i class="fa fa-tv custom"></i> |
|
| <i class="fa fa-umbrella custom"></i> |
|
| <i class="fa fa-university custom"></i> |
|
| <i class="fa fa-unlock custom"></i> |
|
| <i class="fa fa-unlock-alt custom"></i> |
|
| <i class="fa fa-unsorted custom"></i> |
|
| <i class="fa fa-upload custom"></i> |
|
| <i class="fa fa-user custom"></i> |
|
| <i class="fa fa-user-plus custom"></i> |
|
| <i class="fa fa-user-secret custom"></i> |
|
| <i class="fa fa-user-times custom"></i> |
|
Font Awesome - Hand Icons
This chapter explains the usage of Font Awesome Hand icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Hand icons. Replace the < body > tag of the above program with the
code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-hand-rock-o custom"></i> |
|
| <i class="fa fa-hand-o-left custom"></i> |
|
| <i class="fa fa-hand-paper-o custom"></i> |
|
| <i class="fa fa-hand-rock-o custom"></i> |
|
| <i class="fa fa-hand-stop-o custom"></i> |
|
| <i class="fa fa-thumbs-o-up custom"></i> |
|
| <i class="fa fa-hand-lizard-o custom"></i> |
|
| <i class="fa fa-hand-o-right custom"></i> |
|
| <i class="fa fa-hand-peace-o custom"></i> |
|
| <i class="fa fa-hand-scissors-o custom"></i> |
|
| <i class="fa fa-thumbs-down custom"></i> |
|
| <i class="fa fa-thumbs-up custom"></i> |
|
| <i class="fa fa-hand-o-up custom"></i> |
|
| <i class="fa fa-hand-pointer-o custom"></i> |
|
| <i class="fa fa-hand-spock-o custom"></i> |
|
| <i class="fa fa-thumbs-o-down custom"></i> |
|
Font Awesome - Transportation Icons
This chapter explains the usage of Font Awesome Transportation icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Transportation icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-ambulance custom"></i> |
|
| <i class="fa fa-automobile custom"></i> |
|
| <i class="fa fa-bicycle custom"></i> |
|
| <i class="fa fa-bus custom"></i> |
|
| <i class="fa fa-cab custom"></i> |
|
| <i class="fa fa-car custom"></i> |
|
| <i class="fa fa-fighter-jet custom"></i> |
|
| <i class="fa fa-motorcycle custom"></i> |
|
| <i class="fa fa-plane custom"></i> |
|
| <i class="fa fa-rocket custom"></i> |
|
| <i class="fa fa-ship custom"></i> |
|
| <i class="fa fa-space-shuttle custom"></i> |
|
| <i class="fa fa-subway custom"></i> |
|
| <i class="fa fa-taxi custom"></i> |
|
| <i class="fa fa-train custom"></i> |
|
| <i class="fa fa-truck custom"></i> |
|
| <i class="fa fa-wheelchair custom"></i> |
|
Font Awesome - Gender Icons
This chapter explains the usage of Font Awesome Gender icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Gender icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Result |
|---|
| <i class="fa fa-genderless custom"></i> |
|
| <i class="fa fa-intersex custom"></i> |
|
| <i class="fa fa-mars custom"></i> |
|
| <i class="fa fa-mars-double custom"></i> |
|
| <i class="fa fa-mars-stroke custom"></i> |
|
| <i class="fa fa-mars-stroke-h custom"></i> |
|
| <i class="fa fa-mars-stroke-v custom"></i> |
|
| <i class="fa fa-mercury custom"></i> |
|
| <i class="fa fa-neuter custom"></i> |
|
| <i class="fa fa-transgender custom"></i> |
|
| <i class="fa fa-transgender-alt custom"></i> |
|
| <i class="fa fa-venus custom"></i> |
|
| <i class="fa fa-venus-double custom"></i> |
|
| <i class="fa fa-venus-mars custom"></i> |
|
Font Awesome - File Type Icons
This chapter explains the usage of Font Awesome File Type icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
File Type icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-file custom"></i> |
|
| <i class="fa fa-file-archive-o custom"></i> |
|
| <i class="fa fa-file-audio-o custom"></i> |
|
| <i class="fa fa-file-code-o custom"></i> |
|
| <i class="fa fa-file-excel-o custom"></i> |
|
| <i class="fa fa-file-image-o custom"></i> |
|
| <i class="fa fa-file-movie-o custom"></i> |
|
| <i class="fa fa-file-o custom"></i> |
|
| <i class="fa fa-file-pdf-o custom"></i> |
|
| <i class="fa fa-file-photo-o custom"></i> |
|
| <i class="fa fa-file-picture-o custom"></i> |
|
| <i class="fa fa-file-powerpoint-o custom"></i> |
|
| <i class="fa fa-file-video-o custom"></i> |
|
| <i class="fa fa-file-word-o custom"></i> |
|
| <i class="fa fa-file-zip-o custom"></i> |
|
| <i class="fa fa-file-sound-o custom"></i> |
|
| <i class="fa fa-file-text custom"></i> |
|
| <i class="fa fa-file-text-o custom"></i> |
|
Font Awesome - Spinner Icons
This chapter explains the usage of Font Awesome Spinner icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Spinner icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-circle-o-notch custom"></i> |
|
| <i class="fa fa-cog custom"></i> |
|
| <i class="fa fa-gear custom"></i> |
|
| <i class="fa fa-refresh custom"></i> |
|
| <i class="fa fa-spinner custom"></i> |
|
Font Awesome - Form Control Icons
This chapter explains the usage of Font Awesome Form Control icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Form Control icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-check-square custom"></i> |
|
| <i class="fa fa-check-square-o custom"></i> |
|
| <i class="fa fa-circle custom"></i> |
|
| <i class="fa fa-circle-o custom"></i> |
|
| <i class="fa fa-dot-circle-o custom"></i> |
|
| <i class="fa fa-minus-square custom"></i> |
|
| <i class="fa fa-minus-square-o custom"></i> |
|
| <i class="fa fa-plus-square custom"></i> |
|
| <i class="fa fa-plus-square-o custom"></i> |
|
| <i class="fa fa-square custom"></i> |
|
| <i class="fa fa-square-o custom"></i> |
|
Font Awesome - Payment Icons
This chapter explains the usage of Font Awesome Payment icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Payment icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-cc-amex custom"></i> |
|
| <i class="fa fa-cc-diners-club custom"></i> |
|
| <i class="fa fa-cc-discover custom"></i> |
|
| <i class="fa fa-cc-jcb custom"></i> |
|
| <i class="fa fa-cc-mastercard custom"></i> |
|
| <i class="fa fa-cc-paypal custom"></i> |
|
| <i class="fa fa-cc-stripe custom"></i> |
|
| <i class="fa fa-cc-visa custom"></i> |
|
| <i class="fa fa-credit-card custom"></i> |
|
Font Awesome - Chart Icons
This chapter explains the usage of Font Awesome Chart icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Chart icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-area-chart custom"></i> |
|
| <i class="fa fa-bar-chart custom"></i> |
|
| <i class="fa fa-bar-chart-o custom"></i> |
|
| <i class="fa fa-line-chart custom"></i> |
|
| <i class="fa fa-pie-chart custom"></i> |
|
Font Awesome - Currency Icons
This chapter explains the usage of Font Awesome Currency icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Currency icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-bitcoin custom"></i> |
|
| <i class="fa fa-btc custom"></i> |
|
| <i class="fa fa-cny custom"></i> |
|
| <i class="fa fa-dollar custom"></i> |
|
| <i class="fa fa-eur custom"></i> |
|
| <i class="fa fa-euro custom"></i> |
|
| <i class="fa fa-gbp custom"></i> |
|
| <i class="fa fa-gg custom"></i> |
|
| <i class="fa fa-gg-circle custom"></i> |
|
| <i class="fa fa-ils custom"></i> |
|
| <i class="fa fa-inr custom"></i> |
|
| <i class="fa fa-jpy custom"></i> |
|
| <i class="fa fa-krw custom"></i> |
|
| <i class="fa fa-money custom"></i> |
|
| <i class="fa fa-rmb custom"></i> |
|
| <i class="fa fa-rouble custom"></i> |
|
| <i class="fa fa-rub custom"></i> |
|
| <i class="fa fa-ruble custom"></i> |
|
| <i class="fa fa-rupee custom"></i> |
|
| <i class="fa fa-shekel custom"></i> |
|
| <i class="fa fa-sheqel custom"></i> |
|
| <i class="fa fa-try custom"></i> |
|
| <i class="fa fa-turkish-lira custom"></i> |
|
| <i class="fa fa-usd custom"></i> |
|
| <i class="fa fa-won custom"></i> |
|
| <i class="fa fa-yen custom"></i> |
|
Font Awesome - Text Editor Icons
This chapter explains the usage of Font Awesome Text Editor icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Text Editor icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-align-center custom"></i> |
|
| <i class="fa fa-align-justify custom"></i> |
|
| <i class="fa fa-align-left custom"></i> |
|
| <i class="fa fa-align-right custom"></i> |
|
| <i class="fa fa-bold custom"></i> |
|
| <i class="fa fa-chain custom"></i> |
|
| <i class="fa fa-chain-broken custom"></i> |
|
| <i class="fa fa-clipboard custom"></i> |
|
| <i class="fa fa-columns custom"></i> |
|
| <i class="fa fa-copy custom"></i> |
|
| <i class="fa fa-cut custom"></i> |
|
| <i class="fa fa-dedent custom"></i> |
|
| <i class="fa fa-eraser custom"></i> |
|
| <i class="fa fa-file custom"></i> |
|
| <i class="fa fa-file-o custom"></i> |
|
| <i class="fa fa-file-text custom"></i> |
|
| <i class="fa fa-file-text-o custom"></i> |
|
| <i class="fa fa-files-o custom"></i> |
|
| <i class="fa fa-floppy-o custom"></i> |
|
| <i class="fa fa-font custom"></i> |
|
| <i class="fa fa-header custom"></i> |
|
| <i class="fa fa-indent custom"></i> |
|
| <i class="fa fa-italic custom"></i> |
|
| <i class="fa fa-link custom"></i> |
|
| <i class="fa fa-list custom"></i> |
|
| <i class="fa fa-list-alt custom"></i> |
|
| <i class="fa fa-list-ol custom"></i> |
|
| <i class="fa fa-list-ul custom"></i> |
|
| <i class="fa fa-outdent custom"></i> |
|
| <i class="fa fa-paperclip custom"></i> |
|
| <i class="fa fa-paragraph custom"></i> |
|
| <i class="fa fa-paste custom"></i> |
|
| <i class="fa fa-repeat custom"></i> |
|
| <i class="fa fa-rotate-left custom"></i> |
|
| <i class="fa fa-rotate-right custom"></i> |
|
| <i class="fa fa-save custom"></i> |
|
| <i class="fa fa-scissors custom"></i> |
|
| <i class="fa fa-strikethrough custom"></i> |
|
| <i class="fa fa-subscript custom"></i> |
|
| <i class="fa fa-table custom"></i> |
|
| <i class="fa fa-text-heigh custom"></i> |
|
| <i class="fa fa-text-width custom"></i> |
|
| <i class="fa fa-th custom"></i> |
|
| <i class="fa fa-th-large custom"></i> |
|
| <i class="fa fa-th-list custom"></i> |
|
| <i class="fa fa-underline custom"></i> |
|
| <i class="fa fa-undo custom"></i> |
|
| <i class="fa fa-unlink custom"></i> |
|
Font Awesome - Directional Icons
This chapter explains the usage of Font Awesome Directional icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Directional icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="fa fa-angle-double-down custom" ></i> |
|
| <i class="fa fa-angle-double-left custom" ></i> |
|
| <i class="fa fa-angle-double-right custom" ></i> |
|
| <i class="fa fa-angle-double-up custom" ></i> |
|
| <i class="fa fa-angle-down custom" ></i> |
|
| <i class="fa fa-angle-left custom" ></i> |
|
| <i class="fa fa-angle-right custom" ></i> |
|
| <i class="fa fa-angle-up custom" ></i> |
|
| <i class="fa fa-arrow-circle-down custom" ></i> |
|
| <i class="fa fa-arrow-circle-left custom" ></i> |
|
| <i class="fa fa-arrow-circle-right custom" ></i> |
|
| <i class="fa fa-arrow-circle-up custom" ></i> |
|
| <i class="fa fa-arrow-circle-o-down custom" ></i> |
|
| <i class="fa fa-arrow-circle-o-left custom" ></i> |
|
| <i class="fa fa-arrow-circle-o-right custom" ></i> |
|
| <i class="fa fa-arrow-circle-o-up custom" ></i> |
|
| <i class="fa fa-arrow-down custom" ></i> |
|
| <i class="fa fa-arrow-left custom" ></i> |
|
| <i class="fa fa-arrow-right custom" ></i> |
|
| <i class="fa fa-arrow-up custom" ></i> |
|
| <i class="fa fa-arrows custom" ></i> |
|
| <i class="fa fa-arrows-alt custom" ></i> |
|
| <i class="fa fa-arrows-h custom" ></i> |
|
| <i class="fa fa-arrows-v custom" ></i> |
|
| <i class="fa fa-caret-down custom" ></i> |
|
| <i class="fa fa-caret-left custom" ></i> |
|
| <i class="fa fa-caret-right custom" ></i> |
|
| <i class="fa fa-caret-up custom" ></i> |
|
| <i class="fa fa-caret-square-o-down custom" ></i> |
|
| <i class="fa fa-caret-square-o-left custom" ></i> |
|
| <i class="fa fa-caret-square-o-right custom" ></i> |
|
| <i class="fa fa-caret-square-o-up custom" ></i> |
|
| <i class="fa fa-chevron-circle-down custom" ></i> |
|
| <i class="fa fa-chevron-circle-left custom" ></i> |
|
| <i class="fa fa-chevron-circle-right custom" ></i> |
|
| <i class="fa fa-chevron-circle-up custom" ></i> |
|
| <i class="fa fa-chevron-down custom" ></i> |
|
| <i class="fa fa-chevron-left custom" ></i> |
|
| <i class="fa fa-chevron-right custom" ></i> |
|
| <i class="fa fa-chevron-up custom" ></i> |
|
| <i class="fa fa-hand-o-down custom" ></i> |
|
| <i class="fa fa-hand-o-left custom" ></i> |
|
| <i class="fa fa-hand-o-right custom" ></i> |
|
| <i class="fa fa-hand-o-up custom" ></i> |
|
| <i class="fa fa-long-arrow-down custom" ></i> |
|
| <i class="fa fa-long-arrow-left custom" ></i> |
|
| <i class="fa fa-long-arrow-right custom" ></i> |
|
| <i class="fa fa-long-arrow-up custom" ></i> |
|
| <i class="fa fa-toggle-down custom" ></i> |
|
| <i class="fa fa-toggle-left custom" ></i> |
|
| <i class="fa fa-toggle-right custom" ></i> |
|
| <i class="fa fa-toggle-up custom" ></i> |
|
| <i class="fa fa-exchange custom" ></i> |
|
Font Awesome - Video Player Icons
This chapter explains the usage of Font Awesome Video Player icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Video Player icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Icons |
| <i class="fa fa-arrows-alt custom"></i> |
|
| <i class="fa fa-backward custom"></i> |
|
| <i class="fa fa-compress custom"></i> |
|
| <i class="fa fa-eject custom"></i> |
|
| <i class="fa fa-expand custom"></i> |
|
| <i class="fa fa-fast-backward custom"></i> |
|
| <i class="fa fa-fast-forward custom"></i> |
|
| <i class="fa fa-forward custom"></i> |
|
| <i class="fa fa-play-circle custom"></i> |
|
| <i class="fa fa-play-circle-o custom"></i> |
|
| <i class="fa fa-random custom"></i> |
|
| <i class="fa fa-step-backward custom"></i> |
|
| <i class="fa fa-stop custom"></i> |
|
| <i class="fa fa-pause custom"></i> |
|
| <i class="fa fa-play custom"></i> |
|
| <i class="fa fa-youtube-play custom"></i> |
|
Font Awesome - Brand icons
This chapter explains the usage of Font Awesome Brand icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Brand icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Icons |
| <i class="fa fa-500px custom"></i> |
|
| <i class="fa fa-amazon custom"></i> |
|
| <i class="fa fa-android custom"></i> |
|
| <i class="fa fa-angellist custom"></i> |
|
| <i class="fa fa-adn custom"></i> |
|
| <i class="fa fa-apple custom"></i> |
|
| <i class="fa fa-behance custom"></i> |
|
| <i class="fa fa-behance-square custom"></i> |
|
| <i class="fa fa-bitbucket custom"></i> |
|
| <i class="fa fa-bitbucket-square custom"></i> |
|
| <i class="fa fa-btc custom"></i> |
|
| <i class="fa fa-black-tie custom"></i> |
|
| <i class="fa fa-btc custom"></i> |
|
| <i class="fa fa-buysellads custom"></i> |
|
| <i class="fa fa-cc-amex custom"></i> |
|
| <i class="fa fa-cc-diners-club custom"></i> |
|
| <i class="fa fa-cc-discover custom"></i> |
|
| <i class="fa fa-cc-jcb custom"></i> |
|
| <i class="fa fa-cc-mastercard custom"></i> |
|
| <i class="fa fa-cc-paypal custom"></i> |
|
| <i class="fa fa-cc-stripe custom"></i> |
|
| <i class="fa fa-cc-visa custom"></i> |
|
| <i class="fa fa-chrome custom"></i> |
|
| <i class="fa fa-codepen custom"></i> |
|
| <i class="fa fa-connectdevelop custom"></i> |
|
| <i class="fa fa-contao custom"></i> |
|
| <i class="fa fa-css3 custom"></i> |
|
| <i class="fa fa-dashcube custom"></i> |
|
| <i class="fa fa-delicious custom"></i> |
|
| <i class="fa fa-deviantart custom"></i> |
|
| <i class="fa fa-digg custom"></i> |
|
| <i class="fa fa-dribbble custom"></i> |
|
| <i class="fa fa-dropbox custom"></i> |
|
| <i class="fa fa-drupal custom"></i> |
|
| <i class="fa fa-empire custom"></i> |
|
| <i class="fa fa-expeditedssl custom"></i> |
|
| <i class="fa fa-facebook custom"></i> |
|
| <i class="fa fa-facebook-f custom"></i> |
|
| <i class="fa fa-facebook-official custom"></i> |
|
| <i class="fa fa-facebook-square custom"></i> |
|
| <i class="fa fa-firefox custom"></i> |
|
| <i class="fa fa-flickr custom"></i> |
|
| <i class="fa fa-fonticons custom"></i> |
|
| <i class="fa fa-forumbee custom"></i> |
|
| <i class="fa fa-foursquare custom"></i> |
|
| <i class="fa fa-ge custom"></i> |
|
| <i class="fa fa-get-pocket custom"></i> |
|
| <i class="fa fa-gg custom"></i> |
|
| <i class="fa fa-gg-circle custom"></i> |
|
| <i class="fa fa-git custom"></i> |
|
| <i class="fa fa-git-square custom"></i> |
|
| <i class="fa fa-github custom"></i> |
|
| <i class="fa fa-github-alt custom"></i> |
|
| <i class="fa fa-github-square custom"></i> |
|
| <i class="fa fa-gratipay custom"></i> |
|
| <i class="fa fa-google custom"></i> |
|
| <i class="fa fa-google-plus custom"></i> |
|
| <i class="fa fa-google-plus-square custom"></i> |
|
| <i class="fa fa-youtube-play custom"></i> |
|
| <i class="fa fa-gratipay custom"></i> |
|
| <i class="fa fa-hacker-news custom"></i> |
|
| <i class="fa fa-houzz custom"></i> |
|
| <i class="fa fa-html5 custom"></i> |
|
| <i class="fa fa-instagram custom"></i> |
|
| <i class="fa fa-internet-explorer custom"></i> |
|
| <i class="fa fa-ioxhost custom"></i> |
|
| <i class="fa fa-joomla custom"></i> |
|
| <i class="fa fa-jsfiddle custom"></i> |
|
| <i class="fa fa-lastfm custom"></i> |
|
| <i class="fa fa-lastfm-square custom"></i> |
|
| <i class="fa fa-leanpub custom"></i> |
|
| <i class="fa fa-linkedin custom"></i> |
|
| <i class="fa fa-linkedin-square custom"></i> |
|
| <i class="fa fa-linux custom"></i> |
|
| <i class="fa fa-maxcdn custom"></i> |
|
| <i class="fa fa-meanpath custom"></i> |
|
| <i class="fa fa-medium custom"></i> |
|
| <i class="fa fa-odnoklassniki custom"></i> |
|
| <i class="fa fa-odnoklassniki-square custom"></i> |
|
| <i class="fa fa-opencart custom"></i> |
|
| <i class="fa fa-opera custom"></i> |
|
| <i class="fa fa-optin-monster custom"></i> |
|
| <i class="fa fa-openid custom"></i> |
|
| <i class="fa fa-pagelines custom"></i> |
|
| <i class="fa fa-youtube custom"></i> |
|
| <i class="fa fa-pied-piper custom"></i> |
|
| <i class="fa fa-pied-piper-alt custom"></i> |
|
| <i class="fa fa-pinterest custom"></i> |
|
| <i class="fa fa-pinterest-p custom"></i> |
|
| <i class="fa fa-pinterest-square custom"></i> |
|
| <i class="fa fa-qq custom"></i> |
|
| <i class="fa fa-ra custom"></i> |
|
| <i class="fa fa-rebel custom"></i> |
|
| <i class="fa fa-reddit custom"></i> |
|
| <i class="fa fa-renren custom"></i> |
|
| <i class="fa fa-amazon custom"></i> |
|
| <i class="fa fa-safari custom"></i> |
|
| <i class="fa fa-sellsy custom"></i> |
|
| <i class="fa fa-youtube-square custom"></i> |
|
| <i class="fa fa-share-alt custom"></i> |
|
| <i class="fa fa-share-alt-square custom"></i> |
|
| <i class="fa fa-shirtsinbulk custom"></i> |
|
| <i class="fa fa-simplybuilt custom"></i> |
|
| <i class="fa fa-skyatlas custom"></i> |
|
| <i class="fa fa-skype custom"></i> |
|
| <i class="fa fa-slack custom"></i> |
|
| <i class="fa fa-yc-square custom"></i> |
|
| <i class="fa fa-soundcloud custom"></i> |
|
| <i class="fa fa-spotify custom"></i> |
|
| <i class="fa fa-stack-exchange custom"></i> |
|
| <i class="fa fa-stack-overflow custom"></i> |
|
| <i class="fa fa-steam custom"></i> |
|
| <i class="fa fa-steam-square custom"></i> |
|
| <i class="fa fa-stumbleupon custom"></i> |
|
| <i class="fa fa-stumbleupon-circle custom"></i> |
|
| <i class="fa fa-tencent-weibo custom"></i> |
|
| <i class="fa fa-trello custom"></i> |
|
| <i class="fa fa-tripadvisor custom"></i> |
|
| <i class="fa fa-tumblr custom"></i> |
|
| <i class="fa fa-tumblr-square custom"></i> |
|
| <i class="fa fa-yahoo custom"></i> |
|
| <i class="fa fa-twitter custom"></i> |
|
| <i class="fa fa-twitter-square custom"></i> |
|
| <i class="fa fa-viacoin custom"></i> |
|
| <i class="fa fa-vimeo custom"></i> |
|
| <i class="fa fa-vimeo-square custom"></i> |
|
| <i class="fa fa-vine custom"></i> |
|
| <i class="fa fa-vk custom"></i> |
|
| <i class="fa fa-wechat custom"></i> |
|
| <i class="fa fa-weibo custom"></i> |
|
| <i class="fa fa-weixin custom"></i> |
|
| <i class="fa fa-whatsapp custom"></i> |
|
| <i class="fa fa-wikipedia-w custom"></i> |
|
| <i class="fa fa-windows custom"></i> |
|
| <i class="fa fa-wordpress custom"></i> |
|
| <i class="fa fa-xing custom"></i> |
|
| <i class="fa fa-xing-square custom"></i> |
|
| <i class="fa fa-y-combinator custom"></i> |
|
| <i class="fa fa-y-combinator-square custom"></i> |
|
| <i class="fa fa-yc custom"></i> |
|
Font Awesome - Medical Icons
This chapter explains the usage of Font Awesome Medical icons. 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.custom {font-size: 2em; color: gray;}
</style>
</head>
<body>
<i class = "fa fa-adjust custom"></i>
</body>
</html>
The following table shows the usage and the results of Font Awesome
Medical icons. Replace the < body > tag of the above program with
the code given in the table to get the respective outputs −
| Usage |
Icon |
| <i class="fa fa-ambulance custom"></i> |
|
| <i class="fa fa-h-square custom"></i> |
|
| <i class="fa fa-heart custom"></i> |
|
| <i class="fa fa-heart-o custom"></i> |
|
| <i class="fa fa-heartbeat custom"></i> |
|
| <i class="fa fa-hospital-o custom"></i> |
|
| <i class="fa fa-medkit custom"></i> |
|
| <i class="fa fa-plus-square custom"></i> |
|
| <i class="fa fa-stethoscope custom"></i> |
|
| <i class="fa fa-user-md custom"></i> |
|
| <i class="fa fa-wheelchair custom"></i> |
|
Material Icons
Google provides a set of 750 icons designed under "material design guidelines" and these are known as
Material Design
icons. These icons are simple and they support all modern web browsers.
Since these icons are vector based, they are scalable as well. To use
these icons, we have to load the font (library)
material-icons.
Loading the Font (library)
To load the material-icons library, copy and paste the following line in the <head> section of a webpage.
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
Using the Icon
Google's Material Icons provides a long list of icons. Choose any one
of them and add the name of the icon class to any HTML element within
the < body > tag. In the following example, we have used the icon
named
accessibility that belongs to the action category.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body>
<i class = "material-icons">accessibility</i>
</body>
</html>
It will produce the following output −
Defining the Size
You can increase or decrease the size of an icon by defining its size
in the CSS and using it along with the class name as shown below. In
the following example, we have declared the size as 6 em.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class = "material-icons mysize">accessibility</i>
</body>
</html>
It will produce the following output −
Defining the Color
You can use the CSS to define the color of an icon. The following example shows how you can change the color of an icon called
accessibility.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 6em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
It will produce the following output −
List of Categories
Google's Material Icons font provides 519 icons in the following categories −
- Action Icons
- Alert Icons
- AV Icons
- Communication Icons
- Content Icons
- Device Icons
- Editor Icons
- File Icons
- Hardware Icons
- Image Icons
- Maps Icons
- Navigation Icons
- Notification Icons
- Social Icons
- Toggle Icons
To use any of these icons, you have to replace the class name in the
programs given in this chapter with the class name of the desired icon.
In the coming chapters of this Unit (Material Icons), we have explained
category-wise the usage and the respective outputs of various Material
Icons.
Material - Action Icons
This chapter explains the usage of Google's (Material) Action Icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Action Icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">3d_rotation</i> |
3d_rotation |
| <i class="material-icons custom">accessibility</i> |
accessibility |
| <i class="material-icons custom">account_balance</i> |
account_balance |
| <i class="material-icons custom">account_balance_wallet</i> |
account_balance_wallet |
| <i class="material-icons custom">account_box</i> |
account_box |
| <i class="material-icons custom">account_circle</i> |
account_circle |
| <i class="material-icons custom">add_shopping_cart</i> |
add_shopping_cart |
| <i class="material-icons custom">alarm</i> |
alarm |
| <i class="material-icons custom">alarm_add</i> |
alarm_add |
| <i class="material-icons custom">alarm_off</i> |
alarm_off |
| <i class="material-icons custom">alarm_on</i> |
alarm_on |
| <i class="material-icons custom">android</i> |
android |
| <i class="material-icons custom">announcement</i> |
announcement |
| <i class="material-icons custom">aspect_ratio</i> |
aspect_ratio |
| <i class="material-icons custom">assessment</i> |
assessment |
| <i class="material-icons custom">assignment</i> |
assignment |
| <i class="material-icons custom">assignment_ind</i> |
assignment_ind |
| <i class="material-icons custom">assignment_late</i> |
assignment_late |
| <i class="material-icons custom">assignment_return</i> |
assignment_return |
| <i class="material-icons custom">assignment_returned</i> |
assignment_returned |
| <i class="material-icons custom">assignment_turned_in</i> |
assignment_turned_in |
| <i class="material-icons custom">autorenew</i> |
autorenew |
| <i class="material-icons custom">backup</i> |
backup |
| <i class="material-icons custom">book</i> |
book |
| <i class="material-icons custom">bookmark</i> |
bookmark |
| <i class="material-icons custom">bookmark_border</i> |
bookmark_border |
| <i class="material-icons custom">bug_report</i> |
bug_report |
| <i class="material-icons custom">build</i> |
build |
| <i class="material-icons custom">cached</i> |
cached |
| <i class="material-icons custom">camera_enhance</i> |
camera_enhance |
| <i class="material-icons custom">card_giftcard</i> |
card_giftcard |
| <i class="material-icons custom">card_membership</i> |
card_membership |
| <i class="material-icons custom">card_travel</i> |
card_travel |
| <i class="material-icons custom">change_history</i> |
change_history |
| <i class="material-icons custom">check_circle</i> |
check_circle |
| <i class="material-icons custom">chrome_reader_mode</i> |
chrome_reader_mode |
| <i class="material-icons custom">class</i> |
class |
| <i class="material-icons custom">code</i> |
code |
| <i class="material-icons custom">credit_card</i> |
credit_card |
| <i class="material-icons custom">dashboard</i> |
dashboard |
| <i class="material-icons custom">delete</i> |
delete |
| <i class="material-icons custom">description</i> |
description |
| <i class="material-icons custom">dns</i> |
dns |
| <i class="material-icons custom">done</i> |
done |
| <i class="material-icons custom">done_all</i> |
done_all |
| <i class="material-icons custom">eject</i> |
eject |
| <i class="material-icons custom">event</i> |
event |
| <i class="material-icons custom">event_seat</i> |
event_seat |
| <i class="material-icons custom">exit_to_app</i> |
exit_to_app |
| <i class="material-icons custom">explore</i> |
explore |
| <i class="material-icons custom">extension</i> |
extension |
| <i class="material-icons custom">face</i> |
face |
| <i class="material-icons custom">favorite</i> |
favorite |
| <i class="material-icons custom">favorite_border</i> |
favorite_border |
| <i class="material-icons custom">feedback</i> |
feedback |
| <i class="material-icons custom">find_in_page</i> |
find_in_page |
| <i class="material-icons custom">find_replace</i> |
find_replace |
| <i class="material-icons custom">flight_land</i> |
flight_land |
| <i class="material-icons custom">flight_takeoff</i> |
flight_takeoff |
| <i class="material-icons custom">flip_to_back</i> |
flip_to_back |
| <i class="material-icons custom">flip_to_front</i> |
flip_to_front |
| <i class="material-icons custom">get_app</i> |
get_app |
| <i class="material-icons custom">gif</i> |
gif |
| <i class="material-icons custom">grade</i> |
grade |
| <i class="material-icons custom">group_work</i> |
group_work |
| <i class="material-icons custom">help</i> |
help |
| <i class="material-icons custom">help_outline</i> |
help_outline |
| <i class="material-icons custom">highlight_off</i> |
highlight_off |
| <i class="material-icons custom">history</i> |
history |
| <i class="material-icons custom">home</i> |
home |
| <i class="material-icons custom">hourglass_empty</i> |
hourglass_empty |
| <i class="material-icons custom">hourglass_full</i> |
hourglass_full |
| <i class="material-icons custom">http</i> |
http |
| <i class="material-icons custom">https</i> |
https |
| <i class="material-icons custom">info</i> |
info |
| <i class="material-icons custom">info_outline</i> |
info_outline |
| <i class="material-icons custom">input</i> |
input |
| <i class="material-icons custom">invert_colors</i> |
invert_colors |
| <i class="material-icons custom">label</i> |
label |
| <i class="material-icons custom">label_outline</i> |
label_outline |
| <i class="material-icons custom">language</i> |
language |
| <i class="material-icons custom">launch</i> |
launch |
| <i class="material-icons custom">list</i> |
list |
| <i class="material-icons custom">lock</i> |
lock |
| <i class="material-icons custom">lock_open</i> |
lock_open |
| <i class="material-icons custom">lock_outline</i> |
lock_outline |
| <i class="material-icons custom">loyalty</i> |
loyalty |
| <i class="material-icons custom">markunread_mailbox</i> |
markunread_mailbox |
| <i class="material-icons custom">note_add</i> |
note_add |
| <i class="material-icons custom">offline_pin</i> |
offline_pin |
| <i class="material-icons custom">open_in_browser</i> |
open_in_browser |
| <i class="material-icons custom">open_in_new</i> |
open_in_new |
| <i class="material-icons custom">open_with</i> |
open_with |
| <i class="material-icons custom">pageview</i> |
pageview |
| <i class="material-icons custom">payment</i> |
payment |
| <i class="material-icons custom">perm_camera_mic</i> |
perm_camera_mic |
| <i class="material-icons custom">perm_contact_cale</i> |
perm_contact_cale |
| <i class="material-icons custom">perm_data_settings</i> |
perm_data_settings |
| <i class="material-icons custom">perm_device_information</i> |
perm_device_information |
| <i class="material-icons custom">perm_identity</i> |
perm_identity |
| <i class="material-icons custom">perm_media</i> |
perm_media |
| <i class="material-icons custom">perm_phone_msg</i> |
perm_phone_msg |
| <i class="material-icons custom">perm_scan_wifi</i> |
perm_scan_wifi |
| <i class="material-icons custom">picture_in_picture</i> |
picture_in_picture |
| <i class="material-icons custom">play_for_work</i> |
play_for_work |
| <i class="material-icons custom">polymer</i> |
polymer |
| <i class="material-icons custom">power_settings_new</i> |
power_settings_new |
| <i class="material-icons custom">print</i> |
print |
| <i class="material-icons custom">query_builder</i> |
query_builder |
| <i class="material-icons custom">question_answer</i> |
question_answer |
| <i class="material-icons custom">receipt</i> |
receipt |
| <i class="material-icons custom">redeem</i> |
redeem |
| <i class="material-icons custom">reorder</i> |
reorder |
| <i class="material-icons custom">report_problem</i> |
report_problem |
| <i class="material-icons custom">restore</i> |
restore |
| <i class="material-icons custom">room</i> |
room |
| <i class="material-icons custom">schedule</i> |
schedule |
| <i class="material-icons custom">search</i> |
search |
| <i class="material-icons custom">settings</i> |
settings |
| <i class="material-icons custom">settings_applications</i> |
settings_applications |
| <i class="material-icons custom">settings_bluetooth</i> |
settings_bluetooth |
| <i class="material-icons custom">settings_brightness</i> |
settings_brightness |
| <i class="material-icons custom">settings_cell</i> |
settings_cell |
| <i class="material-icons custom">settings_ethernet</i> |
settings_ethernet |
| <i class="material-icons custom">settings_input_antenna</i> |
settings_input_antenna |
| <i class="material-icons custom">settings_input_component</i> |
settings_input_component |
| <i class="material-icons custom">settings_input_hdmi</i> |
settings_input_hdmi |
| <i class="material-icons custom">settings_input_svideo</i> |
settings_input_svideo |
| <i class="material-icons custom">settings_overscan</i> |
settings_overscan |
| <i class="material-icons custom">settings_phone</i> |
settings_phone |
| <i class="material-icons custom">settings_power</i> |
settings_power |
| <i class="material-icons custom">settings_remote</i> |
settings_remote |
| <i class="material-icons custom">settings_voice</i> |
settings_voice |
| <i class="material-icons custom">shop</i> |
shop |
| <i class="material-icons custom">shop_two</i> |
shop_two |
| <i class="material-icons custom">shopping_basket</i> |
shopping_basket |
| <i class="material-icons custom">shopping_cart</i> |
shopping_cart |
| <i class="material-icons custom">speaker_notes</i> |
speaker_notes |
| <i class="material-icons custom">spellcheck</i> |
spellcheck |
| <i class="material-icons custom">star_rate</i> |
star_rate |
| <i class="material-icons custom">stars</i> |
stars |
| <i class="material-icons custom">store</i> |
store |
| <i class="material-icons custom">subject</i> |
subject |
| <i class="material-icons custom">supervisor_account</i> |
supervisor_account |
| <i class="material-icons custom">swap_horiz</i> |
swap_horiz |
| <i class="material-icons custom">swap_vert</i> |
swap_vert |
| <i class="material-icons custom">swap_vertical_circle</i> |
swap_vertical_circle |
| <i class="material-icons custom">system_update_alt</i> |
system_update_alt |
| <i class="material-icons custom">tab</i> |
tab |
| <i class="material-icons custom">tab_unselected</i> |
tab_unselected |
| <i class="material-icons custom">theaters</i> |
theaters |
| <i class="material-icons custom">thumb_down</i> |
thumb_down |
| <i class="material-icons custom">thumb_up</i> |
thumb_up |
| <i class="material-icons custom">thumbs_up_down</i> |
thumbs_up_down |
| <i class="material-icons custom">toc</i> |
toc |
| <i class="material-icons custom">today</i> |
today |
| <i class="material-icons custom">toll</i> |
toll |
| <i class="material-icons custom">track_changes</i> |
track_changes |
| <i class="material-icons custom">translate</i> |
translate |
| <i class="material-icons custom">trending_down</i> |
trending_down |
| <i class="material-icons custom">trending_flat</i> |
trending_flat |
| <i class="material-icons custom">trending_up</i> |
trending_up |
| <i class="material-icons custom">turned_in</i> |
turned_in |
| <i class="material-icons custom">verified_user</i> |
verified_user |
| <i class="material-icons custom">view_agenda</i> |
view_agenda |
| <i class="material-icons custom">view_array</i> |
view_array |
| <i class="material-icons custom">view_carousel</i> |
view_carousel |
| <i class="material-icons custom">view_column</i> |
view_column |
| <i class="material-icons custom">view_day</i> |
view_day |
| <i class="material-icons custom">view_headline</i> |
view_headline |
| <i class="material-icons custom">view_list</i> |
view_list |
| <i class="material-icons custom">view_module</i> |
view_module |
| <i class="material-icons custom">view_quilt</i> |
view_quilt |
| <i class="material-icons custom">view_stream</i> |
view_stream |
| <i class="material-icons custom">view_week</i> |
view_week |
| <i class="material-icons custom">visibility</i> |
visibility |
| <i class="material-icons custom">visibility_off</i> |
visibility_off |
| <i class="material-icons custom">work</i> |
work |
| <i class="material-icons custom">youtube_searched_for</i> |
youtube_searched_for |
| <i class="material-icons custom">zoom_in</i> |
zoom_in |
| <i class="material-icons custom">zoom_out</i> |
zoom_out |
Material - Alert Icons
This chapter explains the usage of Google's (Material) Alert icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Alert icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">add_alert</i> |
add_alert |
| <i class="material-icons custom">error</i> |
error |
| <i class="material-icons custom">error_outline</i> |
error_outline |
| <i class="material-icons custom">warning</i> |
warning |
Material - AV Icons
This chapter explains the usage of Google's (Material) AV icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) AV icons. Replace the < body > tag of the above program
with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">airplay</i> |
airplay |
| <i class="material-icons custom">album</i> |
album |
| <i class="material-icons custom">av_timer</i> |
av_timer |
| <i class="material-icons custom">closed_caption</i> |
closed_caption |
| <i class="material-icons custom">equalizer</i> |
equalizer |
| <i class="material-icons custom">explicit</i> |
explicit |
| <i class="material-icons custom">fast_forward</i> |
fast_forward |
| <i class="material-icons custom">fast_rewind</i> |
fast_rewind |
| <i class="material-icons custom">forward_10</i> |
forward_10 |
| <i class="material-icons custom">forward_30</i> |
forward_30 |
| <i class="material-icons custom">forward_5</i> |
forward_5 |
| <i class="material-icons custom">games</i> |
games |
| <i class="material-icons custom">hd</i> |
hd |
| <i class="material-icons custom">hearing</i> |
hearing |
| <i class="material-icons custom">high_quality</i> |
high_quality |
| <i class="material-icons custom">library_add</i> |
library_add |
| <i class="material-icons custom">library_books</i> |
library_books |
| <i class="material-icons custom">library_music</i> |
library_music |
| <i class="material-icons custom">loop</i> |
loop |
| <i class="material-icons custom">mic</i> |
mic |
| <i class="material-icons custom">mic_none</i> |
mic_none |
| <i class="material-icons custom">mic_off</i> |
mic_off |
| <i class="material-icons custom">movie</i> |
movie |
| <i class="material-icons custom">pause_circle_outline</i> |
pause_circle_outline |
| <i class="material-icons custom">new_releases</i> |
new_releases |
| <i class="material-icons custom">not_interested</i> |
not_interested |
| <i class="material-icons custom">pause</i> |
pause |
| <i class="material-icons custom">pause_circle_filled</i> |
pause_circle_filled |
| <i class="material-icons custom">play_arrow</i> |
play_arrow |
| <i class="material-icons custom">play_circle_filled</i> |
play_circle_filled |
| <i class="material-icons custom">play_circle_outline</i> |
play_circle_outline |
| <i class="material-icons custom">playlist_add</i> |
playlist_add |
| <i class="material-icons custom">queue</i> |
queue |
| <i class="material-icons custom">queue_music</i> |
queue_music |
| <i class="material-icons custom">radio</i> |
radio |
| <i class="material-icons custom">recent_actors</i> |
recent_actors |
| <i class="material-icons custom">repeat</i> |
repeat |
| <i class="material-icons custom">repeat_one</i> |
repeat_one |
| <i class="material-icons custom">replay</i> |
replay |
| <i class="material-icons custom">airplay</i> |
replay_10 |
| <i class="material-icons custom">replay_30</i> |
replay_30 |
| <i class="material-icons custom">replay_5</i> |
replay_5 |
| <i class="material-icons custom">shuffle</i> |
shuffle |
| <i class="material-icons custom">skip_next</i> |
skip_next |
| <i class="material-icons custom">skip_previous</i> |
skip_previous |
| <i class="material-icons custom">snooze</i> |
snooze |
| <i class="material-icons custom">sort_by_alpha</i> |
sort_by_alpha |
| <i class="material-icons custom">stop</i> |
stop |
| <i class="material-icons custom">subtitles</i> |
subtitles |
| <i class="material-icons custom">surround_sound</i> |
surround_sound |
| <i class="material-icons custom">video_library</i> |
video_library |
| <i class="material-icons custom">videocam</i> |
videocam |
| <i class="material-icons custom">videocam_off</i> |
videocam_off |
| <i class="material-icons custom">volume_down</i> |
volume_down |
| <i class="material-icons custom">volume_mute</i> |
volume_mute |
| <i class="material-icons custom">volume_off</i> |
volume_off |
| <i class="material-icons custom">volume_up</i> |
volume_up |
| <i class="material-icons custom">web</i> |
web |
Material - Communication Icons
This chapter explains the usage of Google's (Material) Communication icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Communication icons. Replace the < body > tag of the
above program with the code given in the table to get the respective
outputs −
| Usage |
Result |
| <i class="material-icons custom">business</i> |
business |
| <i class="material-icons custom">call</i> |
call |
| <i class="material-icons custom">call_made</i> |
call_made |
| <i class="material-icons custom">call_merge</i> |
call_merge |
| <i class="material-icons custom">call_missed</i> |
call_missed |
| <i class="material-icons custom">call_received</i> |
call_received |
| <i class="material-icons custom">call_split</i> |
call_split |
| <i class="material-icons custom">chat</i> |
chat |
| <i class="material-icons custom">chat_bubble</i> |
chat_bubble |
| <i class="material-icons custom">chat_bubble_outline</i> |
chat_bubble_outline |
| <i class="material-icons custom">clear_all</i> |
clear_all |
| <i class="material-icons custom">comment</i> |
comment |
| <i class="material-icons custom">contact_phone</i> |
contact_phone |
| <i class="material-icons custom">contacts</i> |
contacts |
| <i class="material-icons custom">dialer_sip</i> |
dialer_sip |
| <i class="material-icons custom">dialpad</i> |
dialpad |
| <i class="material-icons custom">forum</i> |
forum |
| <i class="material-icons custom">import_export</i> |
import_export |
| <i class="material-icons custom">invert_colors_off</i> |
invert_colors_off |
| <i class="material-icons custom">live_help</i> |
live_help |
| <i class="material-icons custom">location_off</i> |
location_off |
| <i class="material-icons custom">location_on</i> |
location_on |
| <i class="material-icons custom">message</i> |
message |
| <i class="material-icons custom">no_sim</i> |
no_sim |
| <i class="material-icons custom">phone</i> |
phone |
| <i class="material-icons custom">phonelink_erase</i> |
phonelink_erase |
| <i class="material-icons custom">phonelink_lock</i> |
phonelink_lock |
| <i class="material-icons custom">phonelink_ring</i> |
phonelink_ring |
| <i class="material-icons custom">phonelink_setup</i> |
phonelink_setup |
| <i class="material-icons custom">portable_wifi_off</i> |
portable_wifi_off |
| <i class="material-icons custom">present_to_all</i> |
present_to_all |
| <i class="material-icons custom">ring_volume</i> |
ring_volume |
| <i class="material-icons custom">speaker_phone</i> |
speaker_phone |
| <i class="material-icons custom">stay_current_landscape</i> |
stay_current_landscape |
| <i class="material-icons custom">stay_current_portrait</i> |
stay_current_portrait |
| <i class="material-icons custom">stay_primary_landscape</i> |
stay_primary_landscape |
| <i class="material-icons custom">stay_primary_portrait</i> |
stay_primary_portrait |
| <i class="material-icons custom">swap_calls</i> |
swap_calls |
| <i class="material-icons custom">textsms</i> |
textsms |
| <i class="material-icons custom">voicemail</i> |
voicemail |
| <i class="material-icons custom">vpn_key</i> |
vpn_key |
| <i class="material-icons custom">email</i> |
email |
| <i class="material-icons custom">call_end</i> |
call_end |
Material - Content Icons
This chapter explains the usage of Google's (Material) Content icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Content icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">add</i> |
add |
| <i class="material-icons custom">add_box</i> |
add_box |
| <i class="material-icons custom">add_circle</i> |
add_circle |
| <i class="material-icons custom">add_circle_outline</i> |
add_circle_outline |
| <i class="material-icons custom">archive</i> |
archive |
| <i class="material-icons custom">backspace</i> |
backspace |
| <i class="material-icons custom">block</i> |
block |
| <i class="material-icons custom">clear</i> |
clear |
| <i class="material-icons custom">content_copy</i> |
content_copy |
| <i class="material-icons custom">content_cut</i> |
content_cut |
| <i class="material-icons custom">content_paste</i> |
content_paste |
| <i class="material-icons custom">create</i> |
create |
| <i class="material-icons custom">drafts</i> |
drafts |
| <i class="material-icons custom">filter_list</i> |
filter_list |
| <i class="material-icons custom">flag</i> |
flag |
| <i class="material-icons custom">font_download</i> |
font_download |
| <i class="material-icons custom">forward</i> |
forward |
| <i class="material-icons custom">gesture</i> |
gesture |
| <i class="material-icons custom">inbox</i> |
inbox |
| <i class="material-icons custom">link</i> |
link |
| <i class="material-icons custom">mail</i> |
mail |
| <i class="material-icons custom">markunread</i> |
markunread |
| <i class="material-icons custom">redo</i> |
redo |
| <i class="material-icons custom">remove</i> |
remove |
| <i class="material-icons custom">remove_circle</i> |
remove_circle |
| <i class="material-icons custom">remove_circle_outline</i> |
remove_circle_outline |
| <i class="material-icons custom">reply</i> |
reply |
| <i class="material-icons custom">reply_all</i> |
reply_all |
| <i class="material-icons custom">report</i> |
report |
| <i class="material-icons custom">save</i> |
save |
| <i class="material-icons custom">select_all</i> |
select_all |
| <i class="material-icons custom">send</i> |
send |
| <i class="material-icons custom">sort</i> |
sort |
| <i class="material-icons custom">text_format</i> |
text_format |
| <i class="material-icons custom">stay_current_portrait</i> |
stay_current_portrait |
| <i class="material-icons custom">undo</i> |
undo |
Material - Device Icons
This chapter provides you the usage of Google's (Material) Device Icons. Assume that
custom is the CSS class name in which we defined the size and colour as shown below.
<style>
i.custom {font-size: 2em; color: green;}
</style>
The following table contains the usage and results of Google's (Material) Device Icons.
| Usage |
Result |
| <i class="material-icons custom">access_alarm</i> |
access_alarm |
| <i class="material-icons custom">access_alarms</i> |
access_alarms |
| <i class="material-icons custom">access_time</i> |
access_time |
| <i class="material-icons custom">add_alarm</i> |
add_alarm |
| <i class="material-icons custom">airplanemode_active</i> |
airplanemode_active |
| <i class="material-icons custom">airplanemode_inactive</i> |
airplanemode_inactive |
| <i class="material-icons custom">battery_alert</i> |
battery_alert |
| <i class="material-icons custom">battery_charging_full</i> |
battery_charging_full
|
| <i class="material-icons custom">battery_full</i> |
battery_full |
| <i class="material-icons custom">battery_std</i> |
battery_std |
| <i class="material-icons custom">battery_unknown</i> |
battery_unknown |
| <i class="material-icons custom">bluetooth</i> |
bluetooth |
| <i class="material-icons custom">bluetooth_connected</i> |
bluetooth_connected |
| <i class="material-icons custom">bluetooth_disabled</i> |
bluetooth_disabled |
| <i class="material-icons custom">bluetooth_searching</i> |
bluetooth_searching |
| <i class="material-icons custom">brightness_auto</i> |
brightness_auto |
| <i class="material-icons custom">brightness_high</i> |
brightness_high |
| <i class="material-icons custom">brightness_low</i> |
brightness_low |
| <i class="material-icons custom">brightness_medium</i> |
brightness_medium |
| <i class="material-icons custom">data_usage</i> |
data_usage |
| <i class="material-icons custom">developer_mode</i> |
developer_mode |
| <i class="material-icons custom">devices</i> |
devices |
| <i class="material-icons custom">dvr</i> |
dvr |
| <i class="material-icons custom">gps_fixed</i> |
gps_fixed |
| <i class="material-icons custom">gps_not_fixed</i> |
gps_not_fixed |
| <i class="material-icons custom">gps_off</i> |
gps_off |
| <i class="material-icons custom">graphic_eq</i> |
graphic_eq |
| <i class="material-icons custom">location_disabled</i> |
location_disabled |
| <i class="material-icons custom">location_searching</i> |
location_searching |
| <i class="material-icons custom">network_cell</i> |
network_cell |
| <i class="material-icons custom">network_wifi</i> |
network_wifi |
| <i class="material-icons custom">screen_lock_landscape</i> |
screen_lock_landscape |
| <i class="material-icons custom">screen_lock_portrait</i> |
screen_lock_portrait |
| <i class="material-icons custom">screen_lock_rotation</i> |
screen_lock_rotation |
| <i class="material-icons custom">screen_rotation</i> |
screen_rotation |
| <i class="material-icons custom">sd_storage</i> |
sd_storage |
| <i class="material-icons custom">settings_system_daydream</i> |
settings_system_daydream |
| <i class="material-icons custom">signal_cellular_4_bar</i> |
signal_cellular_4_bar |
| <i class="material-icons custom">wifi_tethering</i> |
wifi_tethering |
| <i class="material-icons custom">signal_cellular_no_sim</i> |
signal_cellular_no_sim |
| <i class="material-icons custom">signal_cellular_null</i> |
signal_cellular_null |
| <i class="material-icons custom">signal_cellular_off</i> |
signal_cellular_off |
| <i class="material-icons custom">signal_wifi_4_bar</i> |
signal_wifi_4_bar |
| <i class="material-icons custom">signal_wifi_4_bar_lock</i> |
signal_wifi_4_bar_lock |
| <i class="material-icons custom">signal_wifi_off</i> |
signal_wifi_off |
| <i class="material-icons custom">storage</i> |
storage |
| <i class="material-icons custom">usb</i> |
usb |
| <i class="material-icons custom">wallpaper</i> |
wallpaper |
| <i class="material-icons custom">widgets</i> |
widgets |
| <i class="material-icons custom">wifi_lock</i> |
wifi_lock |
| <i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i> |
signal_cellular_connected_no_internet_4_bar |
Material - Editor Icons
This chapter explains the usage of Google's (Material) Editor icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Editor icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">attach_file</i> |
attach_file |
| <i class="material-icons custom">attach_money</i> |
attach_money |
| <i class="material-icons custom">border_all</i> |
border_all |
| <i class="material-icons custom">border_bottom</i> |
border_bottom |
| <i class="material-icons custom">border_clear</i> |
border_clear |
| <i class="material-icons custom">border_color</i> |
border_color |
| <i class="material-icons custom">border_horizontal</i> |
border_horizontal |
| <i class="material-icons custom">border_inner</i> |
border_inner |
| <i class="material-icons custom">border_left</i> |
border_left |
| <i class="material-icons custom">border_outer</i> |
border_outer |
| <i class="material-icons custom">border_right</i> |
border_right |
| <i class="material-icons custom">border_style</i> |
border_style |
| <i class="material-icons custom">border_top</i> |
border_top |
| <i class="material-icons custom">border_vertical</i> |
border_vertical |
| <i class="material-icons custom">format_align_center</i> |
format_align_center |
| <i class="material-icons custom">format_align_justify</i> |
format_align_justify |
| <i class="material-icons custom">format_align_left</i> |
format_align_left |
| <i class="material-icons custom">format_align_right</i> |
format_align_right |
| <i class="material-icons custom">format_bold</i> |
format_bold |
| <i class="material-icons custom">format_clear</i> |
format_clear |
| <i class="material-icons custom">format_color_fill</i> |
format_color_fill |
| <i class="material-icons custom">format_color_reset</i> |
format_color_reset |
| <i class="material-icons custom">format_color_text</i> |
format_color_text |
| <i class="material-icons custom">format_indent_decrease</i> |
format_indent_decrease |
| <i class="material-icons custom">format_indent_increase</i> |
format_indent_increase |
| <i class="material-icons custom">format_italic</i> |
format_italic |
| <i class="material-icons custom">format_line_spacing</i> |
format_line_spacing |
| <i class="material-icons custom">format_list_bulleted</i> |
format_list_bulleted |
| <i class="material-icons custom">format_list_numbered</i> |
format_list_numbered |
| <i class="material-icons custom">format_paint</i> |
format_paint |
| <i class="material-icons custom">format_quote</i> |
format_quote |
| <i class="material-icons custom">format_size</i> |
format_size |
| <i class="material-icons custom">format_strikethrough</i> |
format_strikethrough |
| <i class="material-icons custom">format_textdirection_l_to_r</i> |
format_textdirection_l_to_r |
| <i class="material-icons custom">format_textdirection_r_to_l</i> |
format_textdirection_r_to_l |
| <i class="material-icons custom">format_underline</i> |
format_underline |
| <i class="material-icons custom">functions</i> |
functions |
| <i class="material-icons custom">insert_chart</i> |
insert_chart |
| <i class="material-icons custom">insert_comment</i> |
insert_comment |
| <i class="material-icons custom">insert_drive_file</i> |
insert_drive_file |
| <i class="material-icons custom">insert_emoticon</i> |
insert_emoticon |
| <i class="material-icons custom">insert_invitation</i> |
insert_invitation |
| <i class="material-icons custom">insert_link</i> |
insert_link |
| <i class="material-icons custom">insert_photo</i> |
insert_photo |
| <i class="material-icons custom">merge_type</i> |
merge_type |
| <i class="material-icons custom">mode_comment</i> |
mode_comment |
| <i class="material-icons custom">mode_edit</i> |
mode_edit |
| <i class="material-icons custom">money_off</i> |
money_off |
| <i class="material-icons custom">publish</i> |
publish |
| <i class="material-icons custom">space_bar</i> |
space_bar |
| <i class="material-icons custom">strikethrough_s</i> |
strikethrough_s |
| <i class="material-icons custom">vertical_align_bottom</i> |
vertical_align_bottom |
| <i class="material-icons custom">vertical_align_center</i> |
vertical_align_center |
| <i class="material-icons custom">vertical_align_top</i> |
vertical_align_top |
| <i class="material-icons custom">wrap_text</i> |
wrap_text |
Material - File Icons
This chapter explains the usage of Google's (Material) File icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) File icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">attachment</i> |
attachment |
| <i class="material-icons custom">cloud</i> |
cloud |
| <i class="material-icons custom">cloud_circle</i> |
cloud_circle |
| <i class="material-icons custom">cloud_done</i> |
cloud_done |
| <i class="material-icons custom">cloud_download</i> |
cloud_download |
| <i class="material-icons custom">cloud_off</i> |
cloud_off |
| <i class="material-icons custom">cloud_queue</i> |
cloud_queue |
| <i class="material-icons custom">cloud_upload</i> |
cloud_upload |
| <i class="material-icons custom">file_download</i> |
file_download |
| <i class="material-icons custom">file_upload</i> |
file_upload |
| <i class="material-icons custom">folder</i> |
folder |
| <i class="material-icons custom">folder_open</i> |
folder_open |
| <i class="material-icons custom">folder_shared</i> |
folder_shared |
Material - Hardware Icons
This chapter explains the usage of Google's (Material) Hardware icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Hardware icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">cast</i> |
cast |
| <i class="material-icons custom">cast_connected</i> |
cast_connected |
| <i class="material-icons custom">computer</i> |
computer |
| <i class="material-icons custom">desktop_mac</i> |
desktop_mac |
| <i class="material-icons custom">desktop_windows</i> |
desktop_windows |
| <i class="material-icons custom">developer_board</i> |
developer_board |
| <i class="material-icons custom">device_hub</i> |
device_hub |
| <i class="material-icons custom">dock</i> |
dock |
| <i class="material-icons custom">gamepad</i> |
gamepad |
| <i class="material-icons custom">headset</i> |
headset |
| <i class="material-icons custom">headset_mic</i> |
headset_mic |
| <i class="material-icons custom">keyboard</i> |
keyboard |
| <i class="material-icons custom">keyboard_arrow_down</i> |
keyboard_arrow_down |
| <i class="material-icons custom">keyboard_arrow_left</i> |
keyboard_arrow_left |
| <i class="material-icons custom">keyboard_arrow_right</i> |
keyboard_arrow_right |
| <i class="material-icons custom">keyboard_arrow_up</i> |
keyboard_arrow_up |
| <i class="material-icons custom">keyboard_backspace</i> |
keyboard_backspace |
| <i class="material-icons custom">keyboard_capslock</i> |
keyboard_capslock |
| <i class="material-icons custom">keyboard_hide</i> |
keyboard_hide |
| <i class="material-icons custom">keyboard_return</i> |
keyboard_return |
| <i class="material-icons custom">keyboard_tab</i> |
keyboard_tab |
| <i class="material-icons custom">keyboard_voice</i> |
keyboard_voice |
| <i class="material-icons custom">laptop</i> |
laptop |
| <i class="material-icons custom">laptop_chromebook</i> |
laptop_chromebook |
| <i class="material-icons custom">laptop_mac</i> |
laptop_mac |
| <i class="material-icons custom">laptop_windows</i> |
laptop_windows |
| <i class="material-icons custom">memory</i> |
memory |
| <i class="material-icons custom">mouse</i> |
mouse |
| <i class="material-icons custom">phone_android</i> |
phone_android |
| <i class="material-icons custom">phone_iphone</i> |
phone_iphone |
| <i class="material-icons custom">phonelink</i> |
phonelink |
| <i class="material-icons custom">phonelink_off</i> |
phonelink_off |
| <i class="material-icons custom">power_input</i> |
power_input |
| <i class="material-icons custom">router</i> |
router |
| <i class="material-icons custom">scanner</i> |
scanner |
| <i class="material-icons custom">security</i> |
security |
| <i class="material-icons custom">sim_card</i> |
sim_card |
| <i class="material-icons custom">smartphone</i> |
smartphone |
| <i class="material-icons custom">speaker</i> |
speaker |
| <i class="material-icons custom">speaker_group</i> |
speaker_group |
| <i class="material-icons custom">tablet</i> |
tablet |
| <i class="material-icons custom">tablet_android</i> |
tablet_android |
| <i class="material-icons custom">tablet_mac</i> |
tablet_mac |
| <i class="material-icons custom">toys</i> |
toys |
| <i class="material-icons custom">tv</i> |
tv |
| <i class="material-icons custom">watch</i> |
watch |
Material - Image Icons
This chapter explains the usage of Google's (Material) Image icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Image icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">add_to_photos</i> |
add_to_photos |
| <i class="material-icons custom">adjust</i> |
adjust |
| <i class="material-icons custom">assistant</i> |
assistant |
| <i class="material-icons custom">assistant</i> |
assistant |
| <i class="material-icons custom">audiotrack</i> |
audiotrack |
| <i class="material-icons custom">blur_circular</i> |
blur_circular |
| <i class="material-icons custom">blur_linear</i> |
blur_linear |
| <i class="material-icons custom">blur_off</i> |
blur_off |
| <i class="material-icons custom">blur_on</i> |
blur_on |
| <i class="material-icons custom">brightness_1</i> |
brightness_1 |
| <i class="material-icons custom">brightness_2</i> |
brightness_2 |
| <i class="material-icons custom">brightness_3</i> |
brightness_3 |
| <i class="material-icons custom">brightness_4</i> |
brightness_4 |
| <i class="material-icons custom">brightness_5</i> |
brightness_5 |
| <i class="material-icons custom">brightness_6</i> |
brightness_6 |
| <i class="material-icons custom">brightness_7</i> |
brightness_7 |
| <i class="material-icons custom">broken_image</i> |
broken_image |
| <i class="material-icons custom">brush</i> |
brush |
| <i class="material-icons custom">camera</i> |
camera |
| <i class="material-icons custom">camera_alt</i> |
camera_alt |
| <i class="material-icons custom">camera_front</i> |
camera_front |
| <i class="material-icons custom">camera_rear</i> |
camera_rear |
| <i class="material-icons custom">camera_roll</i> |
camera_roll |
| <i class="material-icons custom">center_focus_strong</i> |
center_focus_strong |
| <i class="material-icons custom">center_focus_weak</i> |
center_focus_weak |
| <i class="material-icons custom">collections</i> |
collections |
| <i class="material-icons custom">collections_bookmark</i> |
collections_bookmark |
| <i class="material-icons custom">color_lens</i> |
color_lens |
| <i class="material-icons custom">colorize</i> |
colorize |
| <i class="material-icons custom">compare</i> |
compare |
| <i class="material-icons custom">control_point</i> |
control_point |
| <i class="material-icons custom">control_point_duplicate</i> |
control_point_duplicate |
| <i class="material-icons custom">crop</i> |
crop |
| <i class="material-icons custom">crop_16_9</i> |
crop_16_9 |
| <i class="material-icons custom">crop_3_2</i> |
crop_3_2 |
| <i class="material-icons custom">crop_5_4</i> |
crop_5_4 |
| <i class="material-icons custom">crop_7_5</i> |
crop_7_5 |
| <i class="material-icons custom">crop_din</i> |
crop_din |
| <i class="material-icons custom">crop_free</i> |
crop_free |
| <i class="material-icons custom">crop_landscape</i> |
crop_landscape |
| <i class="material-icons custom">crop_original</i> |
crop_original |
| <i class="material-icons custom">crop_portrait</i> |
crop_portrait |
| <i class="material-icons custom">crop_square</i> |
crop_square |
| <i class="material-icons custom">dehaze</i> |
dehaze |
| <i class="material-icons custom">details</i> |
details |
| <i class="material-icons custom">edit</i> |
edit |
| <i class="material-icons custom">exposure</i> |
exposure |
| <i class="material-icons custom">exposure_neg_1</i> |
exposure_neg_1 |
| <i class="material-icons custom">exposure_plus_1</i> |
exposure_plus_1 |
| <i class="material-icons custom">exposure_plus_2</i> |
exposure_plus_2 |
| <i class="material-icons custom">exposure_zero</i> |
exposure_zero |
| <i class="material-icons custom">filter</i> |
filter |
| <i class="material-icons custom">filter_1</i> |
filter_1 |
| <i class="material-icons custom">filter_2</i> |
filter_2 |
| <i class="material-icons custom">filter_3</i> |
filter_3 |
| <i class="material-icons custom">filter_4</i> |
filter_4 |
| <i class="material-icons custom">filter_5</i> |
filter_5 |
| <i class="material-icons custom">filter_6</i> |
filter_6 |
| <i class="material-icons custom">filter_7</i> |
filter_7 |
| <i class="material-icons custom">filter_8</i> |
filter_8 |
| <i class="material-icons custom">filter_9</i> |
filter_9 |
| <i class="material-icons custom">filter_9_plus</i> |
filter_9_plus |
| <i class="material-icons custom">filter_b_and_w</i> |
filter_b_and_w |
| <i class="material-icons custom">filter_center_focus</i> |
filter_center_focus |
| <i class="material-icons custom">filter_drama</i> |
filter_drama |
| <i class="material-icons custom">filter_frames</i> |
filter_frames |
| <i class="material-icons custom">filter_hdr</i> |
filter_hdr |
| <i class="material-icons custom">filter_none</i> |
filter_none |
| <i class="material-icons custom">filter_tilt_shift</i> |
filter_tilt_shift |
| <i class="material-icons custom">filter_vintage</i> |
filter_vintage |
| <i class="material-icons custom">flare</i> |
flare |
| <i class="material-icons custom">flash_auto</i> |
flash_auto |
| <i class="material-icons custom">flash_off</i> |
flash_off |
| <i class="material-icons custom">flash_on</i> |
flash_on |
| <i class="material-icons custom">flip</i> |
flip |
| <i class="material-icons custom">gradient</i> |
gradient |
| <i class="material-icons custom">grain</i> |
grain |
| <i class="material-icons custom">grid_off</i> |
grid_off |
| <i class="material-icons custom">grid_on</i> |
grid_on |
| <i class="material-icons custom">hdr_off</i> |
hdr_off |
| <i class="material-icons custom">hdr_on</i> |
hdr_on |
| <i class="material-icons custom">hdr_strong</i> |
hdr_strong |
| <i class="material-icons custom">hdr_weak</i> |
hdr_weak |
| <i class="material-icons custom">healing</i> |
healing |
| <i class="material-icons custom">image</i> |
image |
| <i class="material-icons custom">image_aspect_ratio</i> |
image_aspect_ratio |
| <i class="material-icons custom">iso</i> |
iso |
| <i class="material-icons custom">landscape</i> |
landscape |
| <i class="material-icons custom">leak_add</i> |
leak_add |
| <i class="material-icons custom">leak_remove</i> |
leak_remove |
| <i class="material-icons custom">lens</i> |
lens |
| <i class="material-icons custom">looks</i> |
looks |
| <i class="material-icons custom">looks_3</i> |
looks_3 |
| <i class="material-icons custom">looks_4</i> |
looks_4 |
| <i class="material-icons custom">looks_5</i> |
looks_5 |
| <i class="material-icons custom">looks_6</i> |
looks_6 |
| <i class="material-icons custom">looks_one</i> |
looks_one |
| <i class="material-icons custom">looks_two</i> |
looks_two |
| <i class="material-icons custom">loupe</i> |
loupe |
| <i class="material-icons custom">monochrome_photos</i> |
monochrome_photos |
| <i class="material-icons custom">movie_creation</i> |
movie_creation |
| <i class="material-icons custom">music_note</i> |
music_note |
| <i class="material-icons custom">nature</i> |
nature |
| <i class="material-icons custom">nature_people</i> |
nature_people |
| <i class="material-icons custom">wb_sunny</i> |
wb_sunny |
| <i class="material-icons custom">navigate_next</i> |
navigate_next |
| <i class="material-icons custom">navigate_before</i> |
navigate_before |
| <i class="material-icons custom">palette</i> |
palette |
| <i class="material-icons custom">panorama</i> |
panorama |
| <i class="material-icons custom">panorama_fish_eye</i> |
panorama_fish_eye |
| <i class="material-icons custom">panorama_horizontal</i> |
panorama_horizontal |
| <i class="material-icons custom">panorama_vertical</i> |
panorama_vertical |
| <i class="material-icons custom">panorama_wide_angle</i> |
panorama_wide_angle |
| <i class="material-icons custom">photo</i> |
photo |
| <i class="material-icons custom">photo_album</i> |
photo_album |
| <i class="material-icons custom">photo_camera</i> |
photo_camera |
| <i class="material-icons custom">photo_library</i> |
photo_library |
| <i class="material-icons custom">photo_size_select_actual</i> |
photo_size_select_actual |
| <i class="material-icons custom">photo_size_select_large</i> |
photo_size_select_large |
| <i class="material-icons custom">photo_size_select_small</i> |
photo_size_select_small |
| <i class="material-icons custom">picture_as_pdf</i> |
picture_as_pdf |
| <i class="material-icons custom">portrait</i> |
portrait |
| <i class="material-icons custom">remove_red_eye</i> |
remove_red_eye |
| <i class="material-icons custom">rotate_90_degrees_ccw</i> |
rotate_90_degrees_ccw |
| <i class="material-icons custom">rotate_left</i> |
rotate_left |
| <i class="material-icons custom">rotate_right</i> |
rotate_right |
| <i class="material-icons custom">slideshow</i> |
slideshow |
| <i class="material-icons custom">straighten</i> |
straighten |
| <i class="material-icons custom">style</i> |
style |
| <i class="material-icons custom">switch_camera</i> |
switch_camera |
| <i class="material-icons custom">switch_video</i> |
switch_video
|
| <i class="material-icons custom">tag_faces</i> |
tag_faces |
| <i class="material-icons custom">texture</i> |
texture |
| <i class="material-icons custom">timelapse</i> |
timelapse |
| <i class="material-icons custom">timer</i> |
timer |
| <i class="material-icons custom">timer_10</i> |
timer_10 |
| <i class="material-icons custom">timer_3</i> |
timer_3 |
| <i class="material-icons custom">timer_off</i> |
timer_off |
| <i class="material-icons custom">tonality</i> |
tonality |
| <i class="material-icons custom">transform</i> |
transform |
| <i class="material-icons custom">tune</i> |
tune |
| <i class="material-icons custom">view_comfy</i> |
view_comfy |
| <i class="material-icons custom">view_compact</i> |
view_compact |
| <i class="material-icons custom">vignette</i> |
vignette |
| <i class="material-icons custom">wb_auto</i> |
wb_auto |
| <i class="material-icons custom">wb_cloudy</i> |
wb_cloudy |
| <i class="material-icons custom">wb_incandescent</i> |
wb_incandescent |
| <i class="material-icons custom">wb_iridescent</i> |
wb_iridescent |
Material - Maps Icons
This chapter explains the usage of Google's (Material) Maps icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Maps icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">beenhere</i> |
beenhere |
| <i class="material-icons custom">directions</i> |
directions |
| <i class="material-icons custom">directions_bike</i> |
directions_bike |
| <i class="material-icons custom">directions_boat</i> |
directions_boat |
| <i class="material-icons custom">directions_bus</i> |
directions_bus |
| <i class="material-icons custom">directions_car</i> |
directions_car |
| <i class="material-icons custom">directions_railway</i> |
directions_railway |
| <i class="material-icons custom">directions_run</i> |
directions_run |
| <i class="material-icons custom">directions_subway</i> |
directions_subway |
| <i class="material-icons custom">directions_transit</i> |
directions_transit |
| <i class="material-icons custom">directions_walk</i> |
directions_walk |
| <i class="material-icons custom">flight</i> |
flight |
| <i class="material-icons custom">hotel</i> |
hotel |
| <i class="material-icons custom">layers</i> |
layers |
| <i class="material-icons custom">layers_clear</i> |
layers_clear |
| <i class="material-icons custom">local_activity</i> |
local_activity |
| <i class="material-icons custom">local_airport</i> |
local_airport |
| <i class="material-icons custom">local_atm</i> |
local_atm |
| <i class="material-icons custom">local_bar</i> |
local_bar |
| <i class="material-icons custom">local_cafe</i> |
local_cafe |
| <i class="material-icons custom">local_car_wash</i> |
local_car_wash |
| <i class="material-icons custom">local_convenience_store</i> |
local_convenience_store |
| <i class="material-icons custom">local_dining</i> |
local_dining |
| <i class="material-icons custom">local_drink</i> |
local_drink |
| <i class="material-icons custom">local_florist</i> |
local_florist |
| <i class="material-icons custom">local_gas_station</i> |
local_gas_station |
| <i class="material-icons custom">local_grocery_store</i> |
local_grocery_store |
| <i class="material-icons custom">local_hospital</i> |
local_hospital |
| <i class="material-icons custom">local_hotel</i> |
local_hotel |
| <i class="material-icons custom">local_laundry_service</i> |
local_laundry_service |
| <i class="material-icons custom">local_library</i> |
local_library |
| <i class="material-icons custom">local_mall</i> |
local_mall |
| <i class="material-icons custom">local_movies</i> |
local_movies |
| <i class="material-icons custom">local_offer</i> |
local_offer |
| <i class="material-icons custom">local_parking</i> |
local_parking |
| <i class="material-icons custom">local_pharmacy</i> |
local_pharmacy |
| <i class="material-icons custom">local_phone</i> |
local_phone |
| <i class="material-icons custom">local_pizza</i> |
local_pizza |
| <i class="material-icons custom">local_play</i> |
local_play |
| <i class="material-icons custom">local_post_office</i> |
local_post_office |
| <i class="material-icons custom">local_printshop</i> |
local_printshop |
| <i class="material-icons custom">local_see</i> |
local_see |
| <i class="material-icons custom">local_shipping</i> |
local_shipping |
| <i class="material-icons custom">local_taxi</i> |
local_taxi |
| <i class="material-icons custom">map</i> |
map |
| <i class="material-icons custom">my_location</i> |
my_location |
| <i class="material-icons custom">navigation</i> |
navigation |
| <i class="material-icons custom">person_pin</i> |
person_pin |
| <i class="material-icons custom">pin_drop</i> |
pin_drop |
| <i class="material-icons custom">place</i> |
place |
| <i class="material-icons custom">rate_review</i> |
rate_review |
| <i class="material-icons custom">restaurant_menu</i> |
restaurant_menu |
| <i class="material-icons custom">satellite</i> |
satellite |
| <i class="material-icons custom">store_mall_directory</i> |
store_mall_directory |
| <i class="material-icons custom">traffic</i> |
traffic |
| <i class="material-icons custom">terrain</i> |
terrain |
Material - Navigation Icons
This chapter explains the usage of Google's (Material) Navigation icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Navigation icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">apps</i> |
apps |
| <i class="material-icons custom">arrow_back</i> |
arrow_back |
| <i class="material-icons custom">arrow_drop_down</i> |
arrow_drop_down |
| <i class="material-icons custom">arrow_drop_down_circle</i> |
arrow_drop_down_circle |
| <i class="material-icons custom">arrow_drop_up</i> |
arrow_drop_up |
| <i class="material-icons custom">arrow_forward</i> |
arrow_forward |
| <i class="material-icons custom">cancel</i> |
cancel |
| <i class="material-icons custom">check</i> |
check |
| <i class="material-icons custom">chevron_left</i> |
chevron_left |
| <i class="material-icons custom">chevron_right</i> |
chevron_right |
| <i class="material-icons custom">close</i> |
close |
| <i class="material-icons custom">expand_less</i> |
expand_less |
| <i class="material-icons custom">expand_more</i> |
expand_more |
| <i class="material-icons custom">fullscreen</i> |
fullscreen |
| <i class="material-icons custom">fullscreen_exit</i> |
fullscreen_exit |
| <i class="material-icons custom">menu</i> |
menu |
| <i class="material-icons custom">more_horiz</i> |
more_horiz |
| <i class="material-icons custom">more_vert</i> |
more_vert |
| <i class="material-icons custom">refresh</i> |
refresh |
Material - Notification Icons
This chapter explains the usage of Google's (Material) Notification icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Notification icons. Replace the < body > tag of the
above program with the code given in the table to get the respective
outputs −
| Usage |
Result |
| <i class="material-icons custom">adb</i> |
adb |
| <i class="material-icons custom">airline_seat_flat</i> |
airline_seat_flat |
| <i class="material-icons custom">airline_seat_flat_angled</i> |
airline_seat_flat_angled |
| <i class="material-icons custom">airline_seat_individual_suite</i> |
airline_seat_individual_suite |
| <i class="material-icons custom">airline_seat_legroom_reduced</i> |
airline_seat_legroom_reduced |
| <i class="material-icons custom">airline_seat_recline_extra</i> |
airline_seat_recline_extra |
| <i class="material-icons custom">airline_seat_recline_normal</i> |
airline_seat_recline_normal |
| <i class="material-icons custom">bluetooth_audio</i> |
bluetooth_audio
|
| <i class="material-icons custom">confirmation_number</i> |
confirmation_number |
| <i class="material-icons custom">disc_full</i> |
disc_full |
| <i class="material-icons custom">do_not_disturb</i> |
do_not_disturb |
| <i class="material-icons custom">do_not_disturb_alt</i> |
do_not_disturb_alt |
| <i class="material-icons custom">drive_eta</i> |
drive_eta |
| <i class="material-icons custom">event_available</i> |
event_available |
| <i class="material-icons custom">event_busy</i> |
event_busy |
| <i class="material-icons custom">event_note</i> |
event_note |
| <i class="material-icons custom">folder_special</i> |
folder_special |
| <i class="material-icons custom">live_tv</i> |
live_tv |
| <i class="material-icons custom">mms</i> |
mms |
| <i class="material-icons custom">more</i> |
more |
| <i class="material-icons custom">network_locked</i> |
network_locked |
| <i class="material-icons custom">ondemand_video</i> |
ondemand_video |
| <i class="material-icons custom">personal_video</i> |
personal_video |
| <i class="material-icons custom">phone_bluetooth_speaker</i> |
phone_bluetooth_speaker |
| <i class="material-icons custom">phone_forwarded</i> |
phone_forwarded |
| <i class="material-icons custom">phone_in_talk</i> |
phone_in_talk |
| <i class="material-icons custom">phone_locked</i> |
phone_locked |
| <i class="material-icons custom">phone_missed</i> |
phone_missed |
| <i class="material-icons custom">phone_paused</i> |
phone_paused |
| <i class="material-icons custom">power</i> |
power |
| <i class="material-icons custom">sd_card</i> |
sd_card |
| <i class="material-icons custom">sim_card_alert</i> |
sim_card_alert |
| <i class="material-icons custom">sms</i> |
sms |
| <i class="material-icons custom">sms_failed</i> |
sms_failed |
| <i class="material-icons custom">sync</i> |
sync |
| <i class="material-icons custom">sync_disabled</i> |
sync_disabled |
| <i class="material-icons custom">sync_problem</i> |
sync_problem |
| <i class="material-icons custom">system_update</i> |
system_update |
| <i class="material-icons custom">tap_and_play</i> |
tap_and_play |
| <i class="material-icons custom">time_to_leave</i> |
time_to_leave |
| <i class="material-icons custom">vibration</i> |
vibration |
| <i class="material-icons custom">voice_chat</i> |
voice_chat |
| <i class="material-icons custom">vpn_lock</i> |
vpn_lock |
| <i class="material-icons custom">wc</i> |
wc |
| <i class="material-icons custom">wifi</i> |
wifi |
Material - Social Icons
This chapter explains the usage of Google's (Material) Social icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Social icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">cake</i> |
cake |
| <i class="material-icons custom">domain</i> |
domain |
| <i class="material-icons custom">group</i> |
group |
| <i class="material-icons custom">group_add</i> |
group_add |
| <i class="material-icons custom">location_city</i> |
location_city |
| <i class="material-icons custom">mood</i> |
mood |
| <i class="material-icons custom">mood_bad</i> |
mood_bad |
| <i class="material-icons custom">notifications</i> |
notifications |
| <i class="material-icons custom">notifications_active</i> |
notifications_active |
| <i class="material-icons custom">notifications_none</i> |
notifications_none |
| <i class="material-icons custom">notifications_off</i> |
notifications_off |
| <i class="material-icons custom">notifications_paused</i> |
notifications_paused |
| <i class="material-icons custom">pages</i> |
pages |
| <i class="material-icons custom">party_mode</i> |
party_mode |
| <i class="material-icons custom">people</i> |
people |
| <i class="material-icons custom">people_outline</i> |
people_outline |
| <i class="material-icons custom">person</i> |
person |
| <i class="material-icons custom">person_add</i> |
person_add |
| <i class="material-icons custom">person_outline</i> |
person_outline |
| <i class="material-icons custom">plus_one</i> |
plus_one |
| <i class="material-icons custom">poll</i> |
poll |
| <i class="material-icons custom">public</i> |
public |
| <i class="material-icons custom">school</i> |
school |
| <i class="material-icons custom">share</i> |
share |
| <i class="material-icons custom">whatshot</i> |
whatshot |
Material - Toggle Icons
This chapter explains the usage of Google's (Material) Toggle icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Toggle icons. Replace the < body > tag of the above
program with the code given in the table to get the respective outputs −
| Usage |
Result |
| <i class="material-icons custom">check_box</i> |
check_box |
| <i class="material-icons custom">check_box_outline_blank</i> |
check_box_outline_blank |
| <i class="material-icons custom">indeterminate_check_box</i> |
indeterminate_check_box |
| <i class="material-icons custom">radio_button_checked</i> |
radio_button_checked |
| <i class="material-icons custom">radio_button_unchecked</i> |
radio_button_unchecked |
| <i class="material-icons custom">star</i> |
star |
| <i class="material-icons custom">star_border</i> |
star_border |
| <i class="material-icons custom">star_half</i> |
star_half |
Bootstrap Glyphicons
This is a library of monochromatic icons available in raster image
formats, vector image formats, and as fonts. It provides over 250 glyphs
in font format. You can use these fonts in your web projects. These
glyphs are not free, however if you don't have to spend anything in case
you are using them in Bootstrap based projects.
Loading the Font (library)
To load the Bootstrap Glyphicons library, copy and paste the following line in the <head> section of the webpage.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
Using the Icon
Bootstrap Glyphicons provides a number of icons. Choose one of them
and add the name of the icon class to any HTML element within the <
body > tag. In the following example, we have used the icon of the
tree and its class name is
tree-deciduous.
<html>
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>
It will produce the following output −
Defining the Size
You can increase or decrease the size of an icon by defining its size
in the CSS and using it along with the class name as shown below. In
the following example, we have defined the size as 6 em.
<html>
<head>
<link rel = "stylesheet" href = <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
i.mysize {font-size: 6em;}
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
It will produce the following output:
Defining the Color
You can define the color of an icon using the CSS. The following example example shows how to change the color of the tree icon.
<html>
<head>
<link rel = "stylesheet" href = <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
i.custom {font-size: 6em; color: blue;}
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous custom"></i>
</body>
</html>
It will produce the following output −
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 = <link rel = "stylesheet"
href = "http://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> |
No comments:
Post a Comment