Font Awesome - ไอคอนแอปพลิเคชันบนเว็บ
บทนี้จะอธิบายการใช้ไอคอน 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> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -
| การใช้งาน | ผลลัพธ์ |
|---|---|
| <i class = "fa fa-adjustment 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 กำหนดเอง"> </i> | |
| <i class = "fa fa-arrows-v กำหนดเอง"> </i> | |
| <i class = "fa fa-asterisk custom"> </i> | |
| <i class = "fa fa-at custom"> </i> | |
| <i class = "fa fa-car 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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </i> | |
| <i class = "fa fa-calendar-minus-o กำหนดเอง"> </i> | |
| <i class = "fa fa-calendar-o กำหนดเอง"> </i> | |
| <i class = "fa fa-calendar-plus-o กำหนดเอง"> </i> | |
| <i class = "fa fa-calendar-times-o กำหนดเอง"> </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-caret-square-o-down custom"> </i> | |
| <i class = "fa-caret-square-o-left กำหนดเอง"> </i> | |
| <i class = "fa-caret-square-o-right กำหนดเอง"> </i> | |
| <i class = "fa-caret-square-o-up กำหนดเอง"> </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-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 กำหนดเอง"> </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-ก้อนกำหนดเอง"> </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 กำหนดเอง"> </i> | |
| <i class = "fa fa-download custom"> </i> | |
| <i class = "fa fa-edit custom"> </i> | |
| <i class = "fa fa-ellipsis-h กำหนดเอง"> </i> | |
| <i class = "fa fa-ellipsis-v กำหนดเอง"> </i> | |
| <i class = "fa fa-Envelope custom"> </i> | |
| <i class = "fa fa-ซอง -o กำหนดเอง"> </i> | |
| <i class = "fa fa-ซองจดหมายแบบกำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </i> | |
| <i class = "fa fa-file-pdf-o กำหนดเอง"> </i> | |
| <i class = "fa fa-file-photo-o กำหนดเอง"> </i> | |
| <i class = "fa fa-file-picture-o กำหนดเอง"> </i> | |
| <i class = "fa fa-file-powerpoint-o กำหนดเอง"> </i> | |
| <i class = "fa fa-file-sound-o กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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-rescue custom"> </i> | |
| <i class = "fa fa-flag custom"> </i> | |
| <i class = "fa fa-flag-checkered custom"> </i> | |
| <i class = "fa fa-flag-o กำหนดเอง"> </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-Gear custom"> </i> | |
| <i class = "fa fa-gift custom"> </i> | |
| <i class = "fa fa-glass custom"> </i> | |
| <i class = "fa fa-global 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 กำหนดเอง"> </i> | |
| <i class = "fa fa-hand-rock-o custom"> </i> | |
| <i class = "fa fa-hand -issors-o custom"> </i> | |
| <i class = "fa fa-hand-spock-o กำหนดเอง"> </i> | |
| <i class = "fa fa-hand-paper-o custom"> </i> | |
| <i class = "fa fa-hdd-o กำหนดเอง"> </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-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-institustom"> </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 กำหนดเอง"> </i> | |
| <i class = "fa fa-map-o กำหนดเอง"> </i> | |
| <i class = "fa fa-map-pin กำหนดเอง"> </i> | |
| <i class = "fa fa-map-signs custom"> </i> | |
| <i class = "fa fa-meh-o กำหนดเอง"> </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 กำหนดเอง"> </i> | |
| <i class = "fa fa-minus-square-o กำหนดเอง"> </i> | |
| <i class = "fa fa-mobile custom"> </i> | |
| <i class = "fa fa-money custom"> </i> | |
| <i class = "fa fa-moon-o กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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-register 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 กำหนดเอง"> </i> | |
| <i class = "fa fa-share-alt-o กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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 กำหนดเอง"> </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-task 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 กำหนดเอง"> </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-copyright 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 กำหนดเอง"> </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> |