Web-icons-font-awesome-webapplication-icons
提供：Dev Guides
Font Awesome-Webアプリケーションアイコン
この章では、Font Awesome Web Applicationアイコンの使用方法について説明します。 以下の例に示すように、 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 Awesome Web Applicationアイコンの使用法と結果を示しています。 上記のプログラムの<body>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-
| 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> | __ |
