Font Awesome - Icone delle applicazioni web
Questo capitolo spiega l'uso delle icone dell'applicazione Web Font Awesome. Assumilocustom รจ il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.
<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>La tabella seguente mostra l'utilizzo ei risultati delle icone dell'applicazione Web Font Awesome. Sostituisci il tag <body> del programma precedente con il codice fornito nella tabella per ottenere i rispettivi output -
| Utilizzo | Risultato |
|---|---|
| <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-frecce-h custom"> </i> | |
| <i class = "fa fa-frecce-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-megafono 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-headset 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-institute 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-microfono custom"> </i> | |
| <i class = "fa fa-microfono-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> |