- 网页图标教程
- Web 图标-主页
- Web 图标 - 简介
- 字体真棒
- 字体真棒图标
- 真棒字体 - 网页图标
- 字体真棒-手形图标
- Font Awesome - 交通图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 旋转图标
- Font Awesome - 表单控件图标
- 字体真棒-付款图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 视频播放器图标
- Font Awesome - 品牌图标
- 字体真棒-医疗图标
- 材质图标
- 材质图标
- 材质-动作图标
- 材料-警报图标
- 材质-AV 图标
- 材料-通信图标
- 材质-内容图标
- 材质-设备图标
- 材质-编辑器图标
- 材质-文件图标
- 材质-硬件图标
- 材质-图像图标
- 材质-地图图标
- 材质-导航图标
- 材质-通知图标
- 材料-社会图标
- 材质 - 切换图标
- Bootstrap 字形
- Bootstrap 字形
- Bootstrap - 组件
- Web 图标有用的资源
- Web 图标 - 快速指南
- 网页图标 - 有用的资源
- Web 图标-讨论
Font Awesome - Web 应用程序图标
本章介绍 Font Awesome Web 应用程序图标的用法。假设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 应用程序图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-调整自定义"></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 自定义"></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-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 自定义"></i> | |
| <i class="fa fa-barcode custom"></i> | |
| <i class="fa fa-bars 自定义"></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 自定义"></i> | |
| <i class="fa fa-battery-1 自定义"></i> | |
| <i class="fa fa-battery-2 自定义"></i> | |
| <i class="fa fa-battery-3 自定义"></i> | |
| <i class="fa fa-battery-4 自定义"></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-电池-四分之三定制"></i> | |
| <i class="fa fa-battery-full custom"></i> | |
| <i class="fa fa-birthday-cake custom"></i> | |
| <i class="fa fa-bolt 自定义"></i> | |
| <i class="fa fa-bomb custom"></i> | |
| <i class="fa fa-book custom"></i> | |
| <i class="fa fa-书签自定义"></i> | |
| <i class="fa fa-bookmark-o custom"></i> | |
| <i class="fa fa-briefcase custom"></i> | |
| <i class="fa fa-bug 自定义"></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 自定义"></i> | |
| <i class="fa fa-video-camera 自定义"></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 自定义"></i> | |
| <i class="fa fa-camera-retro custom"></i> | |
| <i class="fa fa-car custom"></i> | |
| <i class="fa fa-cc 自定义"></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-证书自定义"></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 自定义"></i> | |
| <i class="fa fa-咖啡定制"></i> | |
| <i class="fa fa-cog 自定义"></i> | |
| <i class="fa fa-cogs 自定义"></i> | |
| <i class="fa fa-comment custom"></i> | |
| <i class="fa fa-comment-o 自定义"></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 自定义"></i> | |
| <i class="fa fa-crosshairs 自定义"></i> | |
| <i class="fa fa-cube 自定义"></i> | |
| <i class="fa fa-cubes 自定义"></i> | |
| <i class="fa fa-cutlery custom"></i> | |
| <i class="fa fa-dashboard 自定义"></i> | |
| <i class="fa fa-数据库自定义"></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 自定义"></i> | |
| <i class="fa fa-ellipsis-v 自定义"></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-橡皮擦自定义"></i> | |
| <i class="fa fa-exchange custom"></i> | |
| <i class="fa fa-感叹号自定义"></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 自定义"></i> | |
| <i class="fa fa-fax 自定义"></i> | |
| <i class="fa fa-feed custom"></i> | |
| <i class="fa fa-女定制"></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 自定义"></i> | |
| <i class="fa fa-file-code-o 自定义"></i> | |
| <i class="fa fa-file-excel-o 自定义"></i> | |
| <i class="fa fa-volume-down 自定义"></i> | |
| <i class="fa fa-file-movie-o custom"></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 custom"></i> | |
| <i class="fa fa-file-sound-o custom"></i> | |
| <i class="fa fa-file-video-o 自定义"></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 自定义"></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 自定义"></i> | |
| <i class="fa fa-fire custom"></i> | |
| <i class="fa fa-fire-Extremeer custom"></i> | |
| <i class="fa fa-flag 自定义"></i> | |
| <i class="fa fa-flag-checkered 自定义"></i> | |
| <i class="fa fa-flag-o 自定义"></i> | |
| <i class="fa fa-flash 自定义"></i> | |
| <i class="fa fa-flask 自定义"></i> | |
| <i class="fa fa-flask 自定义"></i> | |
| <i class="fa fa-folder custom"></i> | |
| <i class="fa fa-folder-o 自定义"></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 自定义"></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 自定义"></i> | |
| <i class="fa fa-gift 自定义"></i> | |
| <i class="fa fa-glass 定制"></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 自定义"></i> | |
| <i class="fa fa-耳机定制"></i> | |
| <i class="fa fa-heart 自定义"></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-酒店定制"></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 自定义"></i> | |
| <i class="fa fa-industry custom"></i> | |
| <i class="fa fa-info custom"></i> | |
| <i class="fa fa-info-circle 自定义"></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-语言自定义"></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 自定义"></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 自定义"></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-麦克风自定义"></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-摩托车定制"></i> | |
| <i class="fa fa-mouse-pointer 自定义"></i> | |
| <i class="fa fa-music custom"></i> | |
| <i class="fa fa-users 自定义"></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 自定义"></i> | |
| <i class="fa fa-pie-chart 自定义"></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-注册自定义"></i> | |
| <i class="fa fa-删除自定义"></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 自定义"></i> | |
| <i class="fa fa-road custom"></i> | |
| <i class="fa fa-anchor custom"></i> | |
| <i class="fa fa-rss 自定义"></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-发送自定义"></i> | |
| <i class="fa fa-send-o 自定义"></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 自定义"></i> | |
| <i class="fa fa-ship custom"></i> | |
| <i class="fa fa-shopping-cart 自定义"></i> | |
| <i class="fa fa-sign-in 自定义"></i> | |
| <i class="fa fa-sign-out custom"></i> | |
| <i class="fa fa-signal custom"></i> | |
| <i class="fa fa-sitemap 自定义"></i> | |
| <i class="fa fa-sliders 自定义"></i> | |
| <i class="fa fa-smile-o custom"></i> | |
| <i class="fa fa-警告自定义"></i> | |
| <i class="fa fa-sort custom"></i> | |
| <i class="fa fa-sort-alpha-asc 自定义"></i> | |
| <i class="fa fa-sort-alpha-desc 自定义"></i> | |
| <i class="fa fa-sort-asc 自定义"></i> | |
| <i class="fa fa-sort-desc 自定义"></i> | |
| <i class="fa fa-sort-down 自定义"></i> | |
| <i class="fa fa-sort-numeric-asc 自定义"></i> | |
| <i class="fa fa-sort-numeric-desc 自定义"></i> | |
| <i class="fa fa-sort-up custom"></i> | |
| <i class="fa fa-space-shuttle custom"></i> | |
| <i class="fa fa-spinner 自定义"></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 自定义"></i> | |
| <i class="fa fa-sticky-note-o 自定义"></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-转速计自定义"></i> | |
| <i class="fa fa-tag 自定义"></i> | |
| <i class="fa fa-tags 自定义"></i> | |
| <i class="fa fa-tasks 自定义"></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 自定义"></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-商标定制"></i> | |
| <i class="fa fa-tras 自定义"></i> | |
| <i class="fa fa-trash-o 自定义"></i> | |
| <i class="fa fa-tree custom"></i> | |
| <i class="fa fa-奖杯自定义"></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-大学定制"></i> | |
| <i class="fa fa-解锁自定义"></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-用户自定义"></i> | |
| <i class="fa fa-user-plus custom"></i> | |
| <i class="fa fa-user-secret 自定义"></i> | |
| <i class="fa fa-user-times custom"></i> |