Font Awesome - Icônes d'application Web
Ce chapitre explique l'utilisation des icônes de l'application Web Font Awesome. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.
<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>Le tableau suivant présente l'utilisation et les résultats des icônes d'application Web Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -
| Usage | Résultat |
|---|---|
| <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-bike 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-quarts 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-enveloppe custom"> </i> | |
| <i class = "fa fa-enveloppe-o custom"> </i> | |
| <i class = "fa fa-wrap-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-pipette 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-casque 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-marque 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-parapluie personnalisé"> </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> |