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.
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"></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> |
|
