FontAwesome-Webアプリケーションアイコン
この章では、Font AwesomeWebアプリケーションアイコンの使用法について説明します。と仮定するcustom 以下の例に示すように、サイズと色を定義したCSSクラス名です。
<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>次の表は、Font AwesomeWebアプリケーションアイコンの使用法と結果を示しています。上記のプログラムの<body>タグを表に示されているコードに置き換えて、それぞれの出力を取得します-
| 使用法 | 結果 |
|---|---|
| <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> |