- Font Awesome
- Font Awesome 图标
- Font Awesome - 网页图标
- Font Awesome - 手势图标
- Font Awesome - 交通图标
- Font Awesome - 性别图标
- Font Awesome - 文件类型图标
- Font Awesome - 加载动画图标
- Font Awesome - 表单控件图标
- Font Awesome - 支付图标
- Font Awesome - 图表图标
- Font Awesome - 货币图标
- Font Awesome - 文本编辑器图标
- Font Awesome - 方向图标
- Font Awesome - 播放器图标
- Font Awesome - 品牌图标
- Font Awesome - 医疗图标
- Material Icons
- Material Icons
- Material - 操作图标
- Material - 警告图标
- Material - 音视频图标
- Material - 通信图标
- Material - 内容图标
- Material - 设备图标
- Material - 编辑器图标
- Material - 文件图标
- Material - 硬件图标
- Material - 图片图标
- Material - 地图图标
- Material - 导航图标
- Material - 通知图标
- Material - 社交图标
- Material - 切换图标
- Bootstrap Glyphicons
- Bootstrap Glyphicons
- Bootstrap - 组件
- 网页图标实用资源
- 网页图标 - 快速指南
- 网页图标 - 实用资源
- 网页图标 - 讨论
网页图标 - 快速指南
网页图标 - 简介
图标是用于表示网页上特定操作或功能的符号。图标用于文档和应用程序，可以是可选择的或不可选择的。例如，我们在应用程序按钮上看到的图像都是图标，这些按钮是可以选择的。同样，当我们使用图标作为公司徽标时，它通常是不可选择的。
在 Windows 环境中，如果我们静音系统音量，它将通过图标表示，如下所示。
使用网页图标，我们可以表示加载页面、禁用选项、链接、重定向等。这些图标可以翻转、旋转、调整大小、添加边框、反转和着色。
图标字体
图标字体包含符号和字形。加载所需的字体后，可以使用该字体提供的任何图标，使用图标的类名。我们还可以使用 CSS 属性为图标应用不同的颜色并调整其大小。有几个图标库（字体）提供图标。本教程重点介绍三种主要的字体，即：
- Font Awesome
- Bootstrap Glyphicons
- Google 的 Material Icons
Font Awesome
此字体提供 519 个免费的可缩放矢量图标。此库完全免费，个人和商业用途均可。这些图标可以轻松自定义。最初，它们是为 Bootstrap 开发的。
Bootstrap Glyphicons
这是一个单色图标库，以光栅图像格式、矢量图像格式和字体格式提供。它以字体格式提供超过 250 个字形。您可以在您的 Web 项目中使用这些字体。这些图标不是免费的，但是您可以在基于 Bootstrap 的项目中使用它们而无需购买。
Google 的 Material Icons
Google 提供了大约 750 个根据“材料设计指南”设计的图标，这些图标被称为Material Design图标。这些图标简单易用，并支持所有现代 Web 浏览器。由于这些图标是基于矢量的，因此它们也是可缩放的。要使用这些图标，我们必须加载字体（库）material-icons。
Font Awesome 图标
Font Awesome 图标库提供 519 个免费的可缩放矢量图标。此库对个人和商业用途完全免费。最初为 Bootstrap 设计，这些图标可以轻松自定义。
加载字体库
要加载 Font Awesome 库，请复制并粘贴以下行到网页的<head>部分。
<head> <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"> </head>
使用图标
Font Awesome 提供了多种图标。选择其中一个，并将图标类名添加到<body>标签内的任何 HTML 元素中。在下面的示例中，我们使用了印度货币的图标。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<i class = "fa fa-inr"></i>
</body>
</html>
它将产生以下输出：
定义大小
您可以通过使用 CSS 定义其大小并将其与类名一起使用来增加或减小图标的大小，如下所示。在给定的示例中，我们已将大小声明为 6em。
<html>
<head>
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.mysize {font-size: 10em;}
</style>
</head>
<body>
<i class = "fa fa-inr mysize"></i>
</body>
</html>
它将产生以下输出：
定义颜色
就像大小一样，您可以使用 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: 6em; color: red;}
</style>
</head>
<body>
<i class = "fa fa-inr custom"></i>
</body>
</html>
类别列表
Font Awesome 在以下类别中提供 519 个图标：
- Web 应用程序图标
- 手势图标
- 交通图标
- 性别图标
- 文件类型图标
- 加载动画图标
- 表单控件图标
- 支付图标
- 图表图标
- 货币图标
- 文本编辑器图标
- 方向图标
- 播放器图标
- 品牌图标
要使用这些图标中的任何一个，您必须将本章中给出的程序中的类名替换为所需图标的类名。在本单元（Font Awesome）的后续章节中，我们按类别解释了各种 Font Awesome 图标的使用和各自的输出。
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-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> |
Font Awesome - 手势图标
本章解释了 Font Awesome 手部图标的使用方法。假设 **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 手部图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-hand-rock-o custom"></i> | |
| <i class="fa fa-hand-o-left custom"></i> | |
| <i class="fa fa-hand-paper-o custom"></i> | |
| <i class="fa fa-hand-rock-o custom"></i> | |
| <i class="fa fa-hand-stop-o custom"></i> | |
| <i class="fa fa-thumbs-o-up custom"></i> | |
| <i class="fa fa-hand-lizard-o custom"></i> | |
| <i class="fa fa-hand-o-right custom"></i> | |
| <i class="fa fa-hand-peace-o custom"></i> | |
| <i class="fa fa-hand-scissors-o custom"></i> | |
| <i class="fa fa-thumbs-down custom"></i> | |
| <i class="fa fa-thumbs-up custom"></i> | |
| <i class="fa fa-hand-o-up custom"></i> | |
| <i class="fa fa-hand-pointer-o custom"></i> | |
| <i class="fa fa-hand-spock-o custom"></i> | |
| <i class="fa fa-thumbs-o-down custom"></i> |
Font Awesome - 交通图标
本章解释了 Font Awesome 交通图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<html>
<head>
<link rel = "stylesheet" href = "http://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 交通图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-ambulance custom"></i> | |
| <i class="fa fa-automobile custom"></i> | |
| <i class="fa fa-bicycle custom"></i> | |
| <i class="fa fa-bus custom"></i> | |
| <i class="fa fa-cab custom"></i> | |
| <i class="fa fa-car custom"></i> | |
| <i class="fa fa-fighter-jet custom"></i> | |
| <i class="fa fa-motorcycle custom"></i> | |
| <i class="fa fa-plane custom"></i> | |
| <i class="fa fa-rocket custom"></i> | |
| <i class="fa fa-ship custom"></i> | |
| <i class="fa fa-space-shuttle custom"></i> | |
| <i class="fa fa-subway custom"></i> | |
| <i class="fa fa-taxi custom"></i> | |
| <i class="fa fa-train custom"></i> | |
| <i class="fa fa-truck custom"></i> | |
| <i class="fa fa-wheelchair custom"></i> |
Font Awesome - 性别图标
本章解释了 Font Awesome 性别图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<html>
<head>
<link rel = "stylesheet" href = "http://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 性别图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-genderless custom"></i> | |
| <i class="fa fa-intersex custom"></i> | |
| <i class="fa fa-mars custom"></i> | |
| <i class="fa fa-mars-double custom"></i> | |
| <i class="fa fa-mars-stroke custom"></i> | |
| <i class="fa fa-mars-stroke-h custom"></i> | |
| <i class="fa fa-mars-stroke-v custom"></i> | |
| <i class="fa fa-mercury custom"></i> | |
| <i class="fa fa-neuter custom"></i> | |
| <i class="fa fa-transgender custom"></i> | |
| <i class="fa fa-transgender-alt custom"></i> | |
| <i class="fa fa-venus custom"></i> | |
| <i class="fa fa-venus-double custom"></i> | |
| <i class="fa fa-venus-mars custom"></i> |
Font Awesome - 文件类型图标
本章解释了 Font Awesome 文件类型图标的使用方法。假设 **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 文件类型图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-file 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-file-image-o custom"></i> | |
| <i class="fa fa-file-movie-o custom"></i> | |
| <i class="fa fa-file-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-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-file-sound-o custom"></i> | |
| <i class="fa fa-file-text custom"></i> | |
| <i class="fa fa-file-text-o custom"></i> |
Font Awesome - 加载动画图标
本章解释了 Font Awesome 加载动画图标的使用方法。假设 **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 加载动画图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-circle-o-notch custom"></i> | |
| <i class="fa fa-cog custom"></i> | |
| <i class="fa fa-gear custom"></i> | |
| <i class="fa fa-refresh custom"></i> | |
| <i class="fa fa-spinner custom"></i> |
Font Awesome - 表单控件图标
本章解释了 Font Awesome 表单控件图标的使用方法。假设 **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 表单控件图标的使用和结果。将上述程序的 <body> 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <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-dot-circle-o custom"></i> | |
| <i class="fa fa-minus-square custom"></i> | |
| <i class="fa fa-minus-square-o custom"></i> | |
| <i class="fa fa-plus-square custom"></i> | |
| <i class="fa fa-plus-square-o custom"></i> | |
| <i class="fa fa-square custom"></i> | |
| <i class="fa fa-square-o custom"></i> | |
Font Awesome - 支付图标
本章解释了 Font Awesome 支付图标的使用方法。假设 **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 支付图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-cc-amex custom"></i> | |
| <i class="fa fa-cc-diners-club custom"></i> | |
| <i class="fa fa-cc-discover custom"></i> | |
| <i class="fa fa-cc-jcb custom"></i> | |
| <i class="fa fa-cc-mastercard custom"></i> | |
| <i class="fa fa-cc-paypal custom"></i> | |
| <i class="fa fa-cc-stripe custom"></i> | |
| <i class="fa fa-cc-visa custom"></i> | |
| <i class="fa fa-credit-card custom"></i> |
Font Awesome - 图表图标
本章解释了 Font Awesome 图表图标的使用方法。假设 **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 图表图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-area-chart custom"></i> | |
| <i class="fa fa-bar-chart custom"></i> | |
| <i class="fa fa-bar-chart-o custom"></i> | |
| <i class="fa fa-line-chart custom"></i> | |
| <i class="fa fa-pie-chart custom"></i> |
Font Awesome - 货币图标
本章解释了 Font Awesome 货币图标的使用方法。假设 **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 货币图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-bitcoin custom"></i> | |
| <i class="fa fa-btc custom"></i> | |
| <i class="fa fa-cny custom"></i> | |
| <i class="fa fa-dollar custom"></i> | |
| <i class="fa fa-eur custom"></i> | |
| <i class="fa fa-euro custom"></i> | |
| <i class="fa fa-gbp custom"></i> | |
| <i class="fa fa-gg custom"></i> | |
| <i class="fa fa-gg-circle custom"></i> | |
| <i class="fa fa-ils custom"></i> | |
| <i class="fa fa-inr custom"></i> | |
| <i class="fa fa-jpy custom"></i> | |
| <i class="fa fa-krw custom"></i> | |
| <i class="fa fa-money custom"></i> | |
| <i class="fa fa-rmb custom"></i> | |
| <i class="fa fa-rouble custom"></i> | |
| <i class="fa fa-rub custom"></i> | |
| <i class="fa fa-ruble custom"></i> | |
| <i class="fa fa-rupee custom"></i> | |
| <i class="fa fa-shekel custom"></i> | |
| <i class="fa fa-sheqel custom"></i> | |
| <i class="fa fa-try custom"></i> | |
| <i class="fa fa-turkish-lira custom"></i> | |
| <i class="fa fa-usd custom"></i> | |
| <i class="fa fa-won custom"></i> | |
| <i class="fa fa-yen custom"></i> |
Font Awesome - 文本编辑器图标
本章解释了 Font Awesome 文本编辑器图标的使用方法。假设 **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 文本编辑器图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-align-center custom"></i> | |
| <i class="fa fa-align-justify custom"></i> | |
| <i class="fa fa-align-left custom"></i> | |
| <i class="fa fa-align-right custom"></i> | |
| <i class="fa fa-bold custom"></i> | |
| <i class="fa fa-chain custom"></i> | |
| <i class="fa fa-chain-broken custom"></i> | |
| <i class="fa fa-clipboard custom"></i> | |
| <i class="fa fa-columns custom"></i> | |
| <i class="fa fa-copy custom"></i> | |
| <i class="fa fa-cut custom"></i> | |
| <i class="fa fa-dedent custom"></i> | |
| <i class="fa fa-eraser custom"></i> | |
| <i class="fa fa-file custom"></i> | |
| <i class="fa fa-file-o custom"></i> | |
| <i class="fa fa-file-text custom"></i> | |
| <i class="fa fa-file-text-o custom"></i> | |
| <i class="fa fa-files-o custom"></i> | |
| <i class="fa fa-floppy-o custom"></i> | |
| <i class="fa fa-font custom"></i> | |
| <i class="fa fa-header custom"></i> | |
| <i class="fa fa-indent custom"></i> | |
| <i class="fa fa-italic custom"></i> | |
| <i class="fa fa-link custom"></i> | |
| <i class="fa fa-list custom"></i> | |
| <i class="fa fa-list-alt custom"></i> | |
| <i class="fa fa-list-ol custom"></i> | |
| <i class="fa fa-list-ul custom"></i> | |
| <i class="fa fa-outdent custom"></i> | |
| <i class="fa fa-paperclip custom"></i> | |
| <i class="fa fa-paragraph custom"></i> | |
| <i class="fa fa-paste custom"></i> | |
| <i class="fa fa-repeat custom"></i> | |
| <i class="fa fa-rotate-left custom"></i> | |
| <i class="fa fa-rotate-right custom"></i> | |
| <i class="fa fa-save custom"></i> | |
| <i class="fa fa-scissors custom"></i> | |
| <i class="fa fa-strikethrough custom"></i> | |
| <i class="fa fa-subscript custom"></i> | |
| <i class="fa fa-table custom"></i> | |
| <i class="fa fa-text-heigh custom"></i> | |
| <i class="fa fa-text-width custom"></i> | |
| <i class="fa fa-th custom"></i> | |
| <i class="fa fa-th-large custom"></i> | |
| <i class="fa fa-th-list custom"></i> | |
| <i class="fa fa-underline custom"></i> | |
| <i class="fa fa-undo custom"></i> | |
| <i class="fa fa-unlink custom"></i> |
Font Awesome - 方向图标
本章解释了 Font Awesome 方向图标的使用方法。假设 **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 方向图标的使用和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="fa fa-angle-double-down custom" ></i> | |
| <i class="fa fa-angle-double-left custom" ></i> | |
| <i class="fa fa-angle-double-right custom" ></i> | |
| <i class="fa fa-angle-double-up custom" ></i> | |
| <i class="fa fa-angle-down custom" ></i> | |
| <i class="fa fa-angle-left custom" ></i> | |
| <i class="fa fa-angle-right custom" ></i> | |
| <i class="fa fa-angle-up custom" ></i> | |
| <i class="fa fa-arrow-circle-down custom" ></i> | |
| <i class="fa fa-arrow-circle-left custom" ></i> | |
| <i class="fa fa-arrow-circle-right custom" ></i> | |
| <i class="fa fa-arrow-circle-up custom" ></i> | |
| <i class="fa fa-arrow-circle-o-down custom" ></i> | |
| <i class="fa fa-arrow-circle-o-left custom" ></i> | |
| <i class="fa fa-arrow-circle-o-right custom" ></i> | |
| <i class="fa fa-arrow-circle-o-up custom" ></i> | |
| <i class="fa fa-arrow-down custom" ></i> | |
| <i class="fa fa-arrow-left custom" ></i> | |
| <i class="fa fa-arrow-right custom" ></i> | |
| <i class="fa fa-arrow-up custom" ></i> | |
| <i class="fa fa-arrows custom" ></i> | |
| <i class="fa fa-arrows-alt custom" ></i> | |
| <i class="fa fa-arrows-h custom" ></i> | |
| <i class="fa fa-arrows-v custom" ></i> | |
| <i class="fa fa-caret-down custom"></i> | |
| <i class="fa fa-caret-left custom"></i> | |
| <i class="fa fa-caret-right custom"></i> | |
| <i class="fa fa-caret-up 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-chevron-circle-down custom"></i> | |
| <i class="fa fa-chevron-circle-left custom"></i> | |
| <i class="fa fa-chevron-circle-right custom"></i> | |
| <i class="fa fa-chevron-circle-up custom"></i> | |
| <i class="fa fa-chevron-down custom"></i> | |
| <i class="fa fa-chevron-left custom"></i> | |
| <i class="fa fa-chevron-right custom"></i> | |
| <i class="fa fa-chevron-up custom"></i> | |
| <i class="fa fa-hand-o-down custom"></i> | |
| <i class="fa fa-hand-o-left custom"></i> | |
| <i class="fa fa-hand-o-right custom"></i> | |
| <i class="fa fa-hand-o-up custom"></i> | |
| <i class="fa fa-long-arrow-down custom"></i> | |
| <i class="fa fa-long-arrow-left custom"></i> | |
| <i class="fa fa-long-arrow-right custom"></i> | |
| <i class="fa fa-long-arrow-up custom"></i> | |
| <i class="fa fa-toggle-down custom"></i> | |
| <i class="fa fa-toggle-left custom"></i> | |
| <i class="fa fa-toggle-right custom"></i> | |
| <i class="fa fa-toggle-up custom"></i> | |
| <i class="fa fa-exchange custom"></i> |
Font Awesome - 播放器图标
本章解释了 Font Awesome 视频播放器图标的使用方法。假设 **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 视频播放器图标的使用方法及其结果。将上面程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 图标 |
|---|---|
| <i class="fa fa-arrows-alt custom"></i> | |
| <i class="fa fa-backward custom"></i> | |
| <i class="fa fa-compress custom"></i> | |
| <i class="fa fa-eject custom"></i> | |
| <i class="fa fa-expand custom"></i> | |
| <i class="fa fa-fast-backward custom"></i> | |
| <i class="fa fa-fast-forward custom"></i> | |
| <i class="fa fa-forward custom"></i> | |
| <i class="fa fa-play-circle custom"></i> | |
| <i class="fa fa-play-circle-o custom"></i> | |
| <i class="fa fa-random custom"></i> | |
| <i class="fa fa-step-backward custom"></i> | |
| <i class="fa fa-stop custom"></i> | |
| <i class="fa fa-pause custom"></i> | |
| <i class="fa fa-play custom"></i> | |
| <i class="fa fa-youtube-play custom"></i> |
Font Awesome - 品牌图标
本章解释了 Font Awesome 品牌图标的使用方法。假设 **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 品牌图标的使用方法及其结果。将上面程序的 <body> 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 图标 |
|---|---|
| <i class="fa fa-500px custom"></i> | |
| <i class="fa fa-amazon custom"></i> | |
| <i class="fa fa-android custom"></i> | |
| <i class="fa fa-angellist custom"></i> | |
| <i class="fa fa-adn custom"></i> | |
| <i class="fa fa-apple custom"></i> | |
| <i class="fa fa-behance custom"></i> | |
| <i class="fa fa-behance-square custom"></i> | |
| <i class="fa fa-bitbucket custom"></i> | |
| <i class="fa fa-bitbucket-square custom"></i> | |
| <i class="fa fa-btc custom"></i> | |
| <i class="fa fa-black-tie custom"></i> | |
| <i class="fa fa-btc custom"></i> | |
| <i class="fa fa-buysellads custom"></i> | |
| <i class="fa fa-cc-amex custom"></i> | |
| <i class="fa fa-cc-diners-club custom"></i> | |
| <i class="fa fa-cc-discover custom"></i> | |
| <i class="fa fa-cc-jcb custom"></i> | |
| <i class="fa fa-cc-mastercard custom"></i> | |
| <i class="fa fa-cc-paypal custom"></i> | |
| <i class="fa fa-cc-stripe custom"></i> | |
| <i class="fa fa-cc-visa custom"></i> | |
| <i class="fa fa-chrome custom"></i> | |
| <i class="fa fa-codepen custom"></i> | |
| <i class="fa fa-connectdevelop custom"></i> | |
| <i class="fa fa-contao custom"></i> | |
| <i class="fa fa-css3 custom"></i> | |
| <i class="fa fa-dashcube custom"></i> | |
| <i class="fa fa-delicious custom"></i> | |
| <i class="fa fa-deviantart custom"></i> | |
| <i class="fa fa-digg custom"></i> | |
| <i class="fa fa-dribbble custom"></i> | |
| <i class="fa fa-dropbox custom"></i> | |
| <i class="fa fa-drupal custom"></i> | |
| <i class="fa fa-empire custom"></i> | |
| <i class="fa fa-expeditedssl custom"></i> | |
| <i class="fa fa-facebook custom"></i> | |
| <i class="fa fa-facebook-f custom"></i> | |
| <i class="fa fa-facebook-official custom"></i> | |
| <i class="fa fa-facebook-square custom"></i> | |
| <i class="fa fa-firefox custom"></i> | |
| <i class="fa fa-flickr custom"></i> | |
| <i class="fa fa-fonticons custom"></i> | |
| <i class="fa fa-forumbee custom"></i> | |
| <i class="fa fa-foursquare custom"></i> | |
| <i class="fa fa-ge custom"></i> | |
| <i class="fa fa-get-pocket custom"></i> | |
| <i class="fa fa-gg custom"></i> | |
| <i class="fa fa-gg-circle custom"></i> | |
| <i class="fa fa-git custom"></i> | |
| <i class="fa fa-git-square custom"></i> | |
| <i class="fa fa-github custom"></i> | |
| <i class="fa fa-github-alt custom"></i> | |
| <i class="fa fa-github-square custom"></i> | |
| <i class="fa fa-gratipay custom"></i> | |
| <i class="fa fa-google custom"></i> | |
| <i class="fa fa-google-plus custom"></i> | |
| <i class="fa fa-google-plus-square custom"></i> | |
| <i class="fa fa-youtube-play custom"></i> | |
| <i class="fa fa-gratipay custom"></i> | |
| <i class="fa fa-hacker-news custom"></i> | |
| <i class="fa fa-houzz custom"></i> | |
| <i class="fa fa-html5 custom"></i> | |
| <i class="fa fa-instagram custom"></i> | |
| <i class="fa fa-internet-explorer custom"></i> | |
| <i class="fa fa-ioxhost custom"></i> | |
| <i class="fa fa-joomla custom"></i> | |
| <i class="fa fa-jsfiddle custom"></i> | |
| <i class="fa fa-lastfm custom"></i> | |
| <i class="fa fa-lastfm-square custom"></i> | |
| <i class="fa fa-leanpub custom"></i> | |
| <i class="fa fa-linkedin custom"></i> | |
| <i class="fa fa-linkedin-square custom"></i> | |
| <i class="fa fa-linux custom"></i> | |
| <i class="fa fa-maxcdn custom"></i> | |
| <i class="fa fa-meanpath custom"></i> | |
| <i class="fa fa-medium custom"></i> | |
| <i class="fa fa-odnoklassniki custom"></i> | |
| <i class="fa fa-odnoklassniki-square custom"></i> | |
| <i class="fa fa-opencart custom"></i> | |
| <i class="fa fa-opera custom"></i> | |
| <i class="fa fa-optin-monster custom"></i> | |
| <i class="fa fa-openid custom"></i> | |
| <i class="fa fa-pagelines custom"></i> | |
| <i class="fa fa-youtube custom"></i> | |
| <i class="fa fa-pied-piper custom"></i> | |
| <i class="fa fa-pied-piper-alt custom"></i> | |
| <i class="fa fa-pinterest custom"></i> | |
| <i class="fa fa-pinterest-p custom"></i> | |
| <i class="fa fa-pinterest-square custom"></i> | |
| <i class="fa fa-qq custom"></i> | |
| <i class="fa fa-ra custom"></i> | |
| <i class="fa fa-rebel custom"></i> | |
| <i class="fa fa-reddit custom"></i> | |
| <i class="fa fa-renren custom"></i> | |
| <i class="fa fa-amazon custom"></i> | |
| <i class="fa fa-safari custom"></i> | |
| <i class="fa fa-sellsy custom"></i> | |
| <i class="fa fa-youtube-square custom"></i> | |
| <i class="fa fa-share-alt custom"></i> | |
| <i class="fa fa-share-alt-square custom"></i> | |
| <i class="fa fa-shirtsinbulk custom"></i> | |
| <i class="fa fa-simplybuilt custom"></i> | |
| <i class="fa fa-skyatlas custom"></i> | |
| <i class="fa fa-skype custom"></i> | |
| <i class="fa fa-slack custom"></i> | |
| <i class="fa fa-yc-square custom"></i> | |
| <i class="fa fa-soundcloud custom"></i> | |
| <i class="fa fa-spotify custom"></i> | |
| <i class="fa fa-stack-exchange custom"></i> | |
| <i class="fa fa-stack-overflow custom"></i> | |
| <i class="fa fa-steam custom"></i> | |
| <i class="fa fa-steam-square custom"></i> | |
| <i class="fa fa-stumbleupon custom"></i> | |
| <i class="fa fa-stumbleupon-circle custom"></i> | |
| <i class="fa fa-tencent-weibo custom"></i> | |
| <i class="fa fa-trello custom"></i> | |
| <i class="fa fa-tripadvisor custom"></i> | |
| <i class="fa fa-tumblr custom"></i> | |
| <i class="fa fa-tumblr-square custom"></i> | |
| <i class="fa fa-yahoo custom"></i> | |
| <i class="fa fa-twitter custom"></i> | |
| <i class="fa fa-twitter-square custom"></i> | |
| <i class="fa fa-viacoin custom"></i> | |
| <i class="fa fa-vimeo custom"></i> | |
| <i class="fa fa-vimeo-square custom"></i> | |
| <i class="fa fa-vine custom"></i> | |
| <i class="fa fa-vk custom"></i> | |
| <i class="fa fa-wechat custom"></i> | |
| <i class="fa fa-weibo custom"></i> | |
| <i class="fa fa-weixin custom"></i> | |
| <i class="fa fa-whatsapp custom"></i> | |
| <i class="fa fa-wikipedia-w custom"></i> | |
| <i class="fa fa-windows custom"></i> | |
| <i class="fa fa-wordpress custom"></i> | |
| <i class="fa fa-xing custom"></i> | |
| <i class="fa fa-xing-square custom"></i> | |
| <i class="fa fa-y-combinator custom"></i> | |
| <i class="fa fa-y-combinator-square custom"></i> | |
| <i class="fa fa-yc custom"></i> |
Font Awesome - 医疗图标
本章解释了 Font Awesome 医疗图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下面的示例所示。
<html>
<head>
<link rel = "stylesheet" href = "http://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 医疗图标的使用方法及其结果。将上面程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 图标 |
|---|---|
| <i class="fa fa-ambulance custom"></i> | |
| <i class="fa fa-h-square 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-hospital-o custom"></i> | |
| <i class="fa fa-medkit custom"></i> | |
| <i class="fa fa-plus-square custom"></i> | |
| <i class="fa fa-stethoscope custom"></i> | |
| <i class="fa fa-user-md custom"></i> | |
| <i class="fa fa-wheelchair custom"></i> |
Material Icons
Google 提供了一套 750 个根据“材料设计指南”设计的图标，这些图标被称为 **材料设计** 图标。这些图标简单易用，并且支持所有现代 Web 浏览器。由于这些图标是基于矢量的，因此它们也是可缩放的。要使用这些图标，我们必须加载字体（库）**material-icons**。
加载字体（库）
要加载 material-icons 库，请复制以下行并将其粘贴到网页的 <head> 部分。
<head> <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet"> </head>
使用图标
Google 的 Material Icons 提供了很长的图标列表。选择其中任何一个，并将图标类的名称添加到 < body > 标记内的任何 HTML 元素中。在下面的示例中，我们使用了名为 **accessibility** 的图标，它属于操作类别。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body>
<i class = "material-icons">accessibility</i>
</body>
</html>
它将产生以下输出：
定义大小
可以通过在 CSS 中定义图标的大小并将其与类名一起使用来增加或减小图标的大小，如下所示。在下面的示例中，我们已将大小声明为 6em。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class = "material-icons mysize">accessibility</i>
</body>
</html>
它将产生以下输出：
定义颜色
可以使用 CSS 定义图标的颜色。以下示例显示了如何更改名为 **accessibility** 的图标的颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 6em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
它将产生以下输出：
类别列表
Google 的 Material Icons 字体在以下类别中提供了 519 个图标 -
- 操作图标
- 警报图标
- 音频/视频图标
- 通信图标
- 内容图标
- 设备图标
- 编辑器图标
- 文件图标
- 硬件图标
- 图像图标
- 地图图标
- 导航图标
- 通知图标
- 社交图标
- 切换图标
要使用任何这些图标，必须将本章中给出的程序中的类名替换为所需图标的类名。在本单元（材料图标）的后续章节中，我们按类别解释了各种材料图标的使用方法和各自的输出。
Material - 操作图标
本章解释了 Google（材料）操作图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（材料）操作图标的使用方法和结果。将上面程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">3d_rotation</i> | 3d旋转 |
| <i class="material-icons custom">accessibility</i> | 辅助功能 |
| <i class="material-icons custom">account_balance</i> | 账户余额 |
| <i class="material-icons custom">account_balance_wallet</i> | 账户余额钱包 |
| <i class="material-icons custom">account_box</i> | 账户框 |
| <i class="material-icons custom">account_circle</i> | 账户圆圈 |
| <i class="material-icons custom">add_shopping_cart</i> | 添加购物车 |
| <i class="material-icons custom">alarm</i> | 闹钟 |
| <i class="material-icons custom">alarm_add</i> | 添加闹钟 |
| <i class="material-icons custom">alarm_off</i> | 闹钟关闭 |
| <i class="material-icons custom">alarm_on</i> | 闹钟开启 |
| <i class="material-icons custom">android</i> | 安卓 |
| <i class="material-icons custom">announcement</i> | 公告 |
| <i class="material-icons custom">aspect_ratio</i> | 纵横比 |
| <i class="material-icons custom">assessment</i> | 评估 |
| <i class="material-icons custom">assignment</i> | 作业 |
| <i class="material-icons custom">assignment_ind</i> | 个人作业 |
| <i class="material-icons custom">assignment_late</i> | 作业逾期 |
| <i class="material-icons custom">assignment_return</i> | 退回作业 |
| <i class="material-icons custom">assignment_returned</i> | 已退回作业 |
| <i class="material-icons custom">assignment_turned_in</i> | 已提交作业 |
| <i class="material-icons custom">autorenew</i> | 自动更新 |
| <i class="material-icons custom">backup</i> | 备份 |
| <i class="material-icons custom">book</i> | 书籍 |
| <i class="material-icons custom">bookmark</i> | 书签 |
| <i class="material-icons custom">bookmark_border</i> | 书签边框 |
| <i class="material-icons custom">bug_report</i> | 错误报告 |
| <i class="material-icons custom">build</i> | 构建 |
| <i class="material-icons custom">cached</i> | 缓存 |
| <i class="material-icons custom">camera_enhance</i> | 相机增强 |
| <i class="material-icons custom">card_giftcard</i> | 礼品卡 |
| <i class="material-icons custom">card_membership</i> | 会员卡 |
| <i class="material-icons custom">card_travel</i> | 旅行卡 |
| <i class="material-icons custom">change_history</i> | 更改历史记录 |
| <i class="material-icons custom">check_circle</i> | 选中圆圈 |
| <i class="material-icons custom">chrome_reader_mode</i> | Chrome阅读器模式 |
| <i class="material-icons custom">class</i> | 课程 |
| <i class="material-icons custom">code</i> | 代码 |
| <i class="material-icons custom">credit_card</i> | 信用卡 |
| <i class="material-icons custom">dashboard</i> | 仪表盘 |
| <i class="material-icons custom">delete</i> | 删除 |
| <i class="material-icons custom">description</i> | 描述 |
| <i class="material-icons custom">dns</i> | DNS |
| <i class="material-icons custom">done</i> | 完成 |
| <i class="material-icons custom">done_all</i> | 全部完成 |
| <i class="material-icons custom">eject</i> | 弹出 |
| <i class="material-icons custom">event</i> | 事件 |
| <i class="material-icons custom">event_seat</i> | 座位 |
| <i class="material-icons custom">exit_to_app</i> | 退出应用 |
| <i class="material-icons custom">explore</i> | 探索 |
| <i class="material-icons custom">extension</i> | 扩展程序 |
| <i class="material-icons custom">face</i> | 面孔 |
| <i class="material-icons custom">favorite</i> | 收藏 |
| <i class="material-icons custom">favorite_border</i> | 收藏边框 |
| <i class="material-icons custom">feedback</i> | 反馈 |
| <i class="material-icons custom">find_in_page</i> | 页面内查找 |
| <i class="material-icons custom">find_replace</i> | 查找并替换 |
| <i class="material-icons custom">flight_land</i> | 飞机着陆 |
| <i class="material-icons custom">flight_takeoff</i> | 飞机起飞 |
| <i class="material-icons custom">flip_to_back</i> | 翻转到背面 |
| <i class="material-icons custom">flip_to_front</i> | 翻转到正面 |
| <i class="material-icons custom">get_app</i> | 获取应用 |
| <i class="material-icons custom">gif</i> | GIF |
| <i class="material-icons custom">grade</i> | 等级 |
| <i class="material-icons custom">group_work</i> | 团队合作 |
| <i class="material-icons custom">help</i> | 帮助 |
| <i class="material-icons custom">help_outline</i> | 帮助大纲 |
| <i class="material-icons custom">highlight_off</i> | 取消高亮 |
| <i class="material-icons custom">history</i> | 历史记录 |
| <i class="material-icons custom">home</i> | 主页 |
| <i class="material-icons custom">hourglass_empty</i> | 空沙漏 |
| <i class="material-icons custom">hourglass_full</i> | 满沙漏 |
| <i class="material-icons custom">http</i> | HTTP |
| <i class="material-icons custom">https</i> | HTTPS |
| <i class="material-icons custom">info</i> | 信息 |
| <i class="material-icons custom">info_outline</i> | 信息大纲 |
| <i class="material-icons custom">input</i> | 输入 |
| <i class="material-icons custom">invert_colors</i> | 颜色反转 |
| <i class="material-icons custom">label</i> | 标签 |
| <i class="material-icons custom">label_outline</i> | 标签大纲 |
| <i class="material-icons custom">language</i> | 语言 |
| <i class="material-icons custom">launch</i> | 启动 |
| <i class="material-icons custom">list</i> | 列表 |
| <i class="material-icons custom">lock</i> | 锁定 |
| <i class="material-icons custom">lock_open</i> | 解锁 |
| <i class="material-icons custom">lock_outline</i> | 锁定大纲 |
| <i class="material-icons custom">loyalty</i> | 忠诚度 |
| <i class="material-icons custom">markunread_mailbox</i> | 未读邮件 |
| <i class="material-icons custom">note_add</i> | 添加笔记 |
| <i class="material-icons custom">offline_pin</i> | 脱机图钉 |
| <i class="material-icons custom">open_in_browser</i> | 在浏览器中打开 |
| <i class="material-icons custom">open_in_new</i> | 在新窗口中打开 |
| <i class="material-icons custom">open_with</i> | 打开方式 |
| <i class="material-icons custom">pageview</i> | 页面浏览 |
| <i class="material-icons custom">payment</i> | 支付 |
| <i class="material-icons custom">perm_camera_mic</i> | 相机麦克风权限 |
| <i class="material-icons custom">perm_contact_cale</i> | 联系人日历权限 |
| <i class="material-icons custom">perm_data_settings</i> | 数据设置权限 |
| <i class="material-icons custom">perm_device_information</i> | 设备信息权限 |
| <i class="material-icons custom">perm_identity</i> | 身份权限 |
| <i class="material-icons custom">perm_media</i> | 媒体权限 |
| <i class="material-icons custom">perm_phone_msg</i> | 电话短信权限 |
| <i class="material-icons custom">perm_scan_wifi</i> | 扫描Wi-Fi权限 |
| <i class="material-icons custom">picture_in_picture</i> | 画中画 |
| <i class="material-icons custom">play_for_work</i> | 工作播放 |
| <i class="material-icons custom">polymer</i> | 聚合物 |
| <i class="material-icons custom">power_settings_new</i> | 电源设置 |
| <i class="material-icons custom">print</i> | 打印 |
| <i class="material-icons custom">query_builder</i> | 查询生成器 |
| <i class="material-icons custom">question_answer</i> | 问答 |
| <i class="material-icons custom">receipt</i> | 收据 |
| <i class="material-icons custom">redeem</i> | 兑换 |
| <i class="material-icons custom">reorder</i> | 重新排序 |
| <i class="material-icons custom">report_problem</i> | 报告问题 |
| <i class="material-icons custom">restore</i> | 恢复 |
| <i class="material-icons custom">room</i> | 房间 |
| <i class="material-icons custom">schedule</i> | 日程安排 |
| <i class="material-icons custom">search</i> | 搜索 |
| <i class="material-icons custom">settings</i> | 设置 |
| <i class="material-icons custom">settings_applications</i> | 应用设置 |
| <i class="material-icons custom">settings_bluetooth</i> | 蓝牙设置 |
| <i class="material-icons custom">settings_brightness</i> | 亮度设置 |
| <i class="material-icons custom">settings_cell</i> | 蜂窝网络设置 |
| <i class="material-icons custom">settings_ethernet</i> | 以太网设置 |
| <i class="material-icons custom">settings_input_antenna</i> | 天线输入设置 |
| <i class="material-icons custom">settings_input_component</i> | 组件输入设置 |
| <i class="material-icons custom">settings_input_hdmi</i> | HDMI输入设置 |
| <i class="material-icons custom">settings_input_svideo</i> | S视频输入设置 |
| <i class="material-icons custom">settings_overscan</i> | 过扫描设置 |
| <i class="material-icons custom">settings_phone</i> | 电话设置 |
| <i class="material-icons custom">settings_power</i> | 电源设置 |
| <i class="material-icons custom">settings_remote</i> | 遥控器设置 |
| <i class="material-icons custom">settings_voice</i> | 语音设置 |
| <i class="material-icons custom">shop</i> | 商店 |
| <i class="material-icons custom">shop_two</i> | 商店二 |
| <i class="material-icons custom">shopping_basket</i> | 购物篮 |
| <i class="material-icons custom">shopping_cart</i> | 购物车 |
| <i class="material-icons custom">speaker_notes</i> | 发言稿 |
| <i class="material-icons custom">spellcheck</i> | 拼写检查 |
| <i class="material-icons custom">star_rate</i> | 星级评分 |
| <i class="material-icons custom">stars</i> | 星星 |
| <i class="material-icons custom">store</i> | 商店 |
| <i class="material-icons custom">subject</i> | 主题 |
| <i class="material-icons custom">supervisor_account</i> | 主管账户 |
| <i class="material-icons custom">swap_horiz</i> | 水平交换 |
| <i class="material-icons custom">swap_vert</i> | 垂直交换 |
| <i class="material-icons custom">swap_vertical_circle</i> | 垂直圆圈交换 |
| <i class="material-icons custom">system_update_alt</i> | 系统更新 |
| <i class="material-icons custom">tab</i> | 标签页 |
| <i class="material-icons custom">tab_unselected</i> | 未选中的标签页 |
| <i class="material-icons custom">theaters</i> | 影院 |
| <i class="material-icons custom">thumb_down</i> | 向下竖起大拇指 |
| <i class="material-icons custom">thumb_up</i> | 向上竖起大拇指 |
| <i class="material-icons custom">thumbs_up_down</i> | 上下竖起大拇指 |
| <i class="material-icons custom">toc</i> | 目录 |
| <i class="material-icons custom">today</i> | 今天 |
| <i class="material-icons custom">toll</i> | 通行费 |
| <i class="material-icons custom">track_changes</i> | 跟踪更改 |
| <i class="material-icons custom">translate</i> | 翻译 |
| <i class="material-icons custom">trending_down</i> | 趋势下降 |
| <i class="material-icons custom">trending_flat</i> | 趋势持平 |
| <i class="material-icons custom">trending_up</i> | 趋势上升 |
| <i class="material-icons custom">turned_in</i> | turned_in |
| <i class="material-icons custom">verified_user</i> | verified_user |
| <i class="material-icons custom">view_agenda</i> | view_agenda |
| <i class="material-icons custom">view_array</i> | view_array |
| <i class="material-icons custom">view_carousel</i> | view_carousel |
| <i class="material-icons custom">view_column</i> | view_column |
| <i class="material-icons custom">view_day</i> | view_day |
| <i class="material-icons custom">view_headline</i> | view_headline |
| <i class="material-icons custom">view_list</i> | view_list |
| <i class="material-icons custom">view_module</i> | view_module |
| <i class="material-icons custom">view_quilt</i> | view_quilt |
| <i class="material-icons custom">view_stream</i> | view_stream |
| <i class="material-icons custom">view_week</i> | view_week |
| <i class="material-icons custom">visibility</i> | visibility |
| <i class="material-icons custom">visibility_off</i> | visibility_off |
| <i class="material-icons custom">work</i> | work |
| <i class="material-icons custom">youtube_searched_for</i> | youtube_searched_for |
| <i class="material-icons custom">zoom_in</i> | zoom_in |
| <i class="material-icons custom">zoom_out</i> | zoom_out |
Material - 警告图标
本章介绍 Google (Material) 警告图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 警告图标的使用方法和结果。将上述程序的 <body> 标记替换为表中给出的代码，即可获得相应的结果：
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">add_alert</i> | add_alert |
| <i class="material-icons custom">error</i> | error |
| <i class="material-icons custom">error_outline</i> | error_outline |
| <i class="material-icons custom">warning</i> | warning |
Material - 音视频图标
本章介绍 Google (Material) 音视频图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 音视频图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的结果：
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">airplay</i> | airplay |
| <i class="material-icons custom">album</i> | album |
| <i class="material-icons custom">av_timer</i> | av_timer |
| <i class="material-icons custom">closed_caption</i> | closed_caption |
| <i class="material-icons custom">equalizer</i> | equalizer |
| <i class="material-icons custom">explicit</i> | explicit |
| <i class="material-icons custom">fast_forward</i> | fast_forward |
| <i class="material-icons custom">fast_rewind</i> | fast_rewind |
| <i class="material-icons custom">forward_10</i> | forward_10 |
| <i class="material-icons custom">forward_30</i> | forward_30 |
| <i class="material-icons custom">forward_5</i> | forward_5 |
| <i class="material-icons custom">games</i> | games |
| <i class="material-icons custom">hd</i> | hd |
| <i class="material-icons custom">hearing</i> | hearing |
| <i class="material-icons custom">high_quality</i> | high_quality |
| <i class="material-icons custom">library_add</i> | library_add |
| <i class="material-icons custom">library_books</i> | library_books |
| <i class="material-icons custom">library_music</i> | library_music |
| <i class="material-icons custom">loop</i> | loop |
| <i class="material-icons custom">mic</i> | mic |
| <i class="material-icons custom">mic_none</i> | mic_none |
| <i class="material-icons custom">mic_off</i> | mic_off |
| <i class="material-icons custom">movie</i> | movie |
| <i class="material-icons custom">pause_circle_outline</i> | pause_circle_outline |
| <i class="material-icons custom">new_releases</i> | new_releases |
| <i class="material-icons custom">not_interested</i> | not_interested |
| <i class="material-icons custom">pause</i> | pause |
| <i class="material-icons custom">pause_circle_filled</i> | pause_circle_filled |
| <i class="material-icons custom">play_arrow</i> | play_arrow |
| <i class="material-icons custom">play_circle_filled</i> | play_circle_filled |
| <i class="material-icons custom">play_circle_outline</i> | play_circle_outline |
| <i class="material-icons custom">playlist_add</i> | playlist_add |
| <i class="material-icons custom">queue</i> | queue |
| <i class="material-icons custom">queue_music</i> | queue_music |
| <i class="material-icons custom">radio</i> | radio |
| <i class="material-icons custom">recent_actors</i> | recent_actors |
| <i class="material-icons custom">repeat</i> | repeat |
| <i class="material-icons custom">repeat_one</i> | repeat_one |
| <i class="material-icons custom">replay</i> | replay |
| <i class="material-icons custom">airplay</i> | replay_10 |
| <i class="material-icons custom">replay_30</i> | replay_30 |
| <i class="material-icons custom">replay_5</i> | replay_5 |
| <i class="material-icons custom">shuffle</i> | shuffle |
| <i class="material-icons custom">skip_next</i> | skip_next |
| <i class="material-icons custom">skip_previous</i> | skip_previous |
| <i class="material-icons custom">snooze</i> | snooze |
| <i class="material-icons custom">sort_by_alpha</i> | sort_by_alpha |
| <i class="material-icons custom">stop</i> | stop |
| <i class="material-icons custom">subtitles</i> | subtitles |
| <i class="material-icons custom">surround_sound</i> | surround_sound |
| <i class="material-icons custom">video_library</i> | video_library |
| <i class="material-icons custom">videocam</i> | videocam |
| <i class="material-icons custom">videocam_off</i> | videocam_off |
| <i class="material-icons custom">volume_down</i> | volume_down |
| <i class="material-icons custom">volume_mute</i> | volume_mute |
| <i class="material-icons custom">volume_off</i> | volume_off |
| <i class="material-icons custom">volume_up</i> | volume_up |
| <i class="material-icons custom">web</i> | web |
Material - 通信图标
本章介绍 Google (Material) 通信图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 通信图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的结果：
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">business</i> | business |
| <i class="material-icons custom">call</i> | call |
| <i class="material-icons custom">call_made</i> | call_made |
| <i class="material-icons custom">call_merge</i> | call_merge |
| <i class="material-icons custom">call_missed</i> | call_missed |
| <i class="material-icons custom">call_received</i> | call_received |
| <i class="material-icons custom">call_split</i> | call_split |
| <i class="material-icons custom">chat</i> | chat |
| <i class="material-icons custom">chat_bubble</i> | chat_bubble |
| <i class="material-icons custom">chat_bubble_outline</i> | chat_bubble_outline |
| <i class="material-icons custom">clear_all</i> | clear_all |
| <i class="material-icons custom">comment</i> | comment |
| <i class="material-icons custom">contact_phone</i> | contact_phone |
| <i class="material-icons custom">contacts</i> | contacts |
| <i class="material-icons custom">dialer_sip</i> | dialer_sip |
| <i class="material-icons custom">dialpad</i> | dialpad |
| <i class="material-icons custom">forum</i> | forum |
| <i class="material-icons custom">import_export</i> | import_export |
| <i class="material-icons custom">invert_colors_off</i> | invert_colors_off |
| <i class="material-icons custom">live_help</i> | live_help |
| <i class="material-icons custom">location_off</i> | location_off |
| <i class="material-icons custom">location_on</i> | location_on |
| <i class="material-icons custom">message</i> | message |
| <i class="material-icons custom">no_sim</i> | no_sim |
| <i class="material-icons custom">phone</i> | phone |
| <i class="material-icons custom">phonelink_erase</i> | phonelink_erase |
| <i class="material-icons custom">phonelink_lock</i> | phonelink_lock |
| <i class="material-icons custom">phonelink_ring</i> | phonelink_ring |
| <i class="material-icons custom">phonelink_setup</i> | phonelink_setup |
| <i class="material-icons custom">portable_wifi_off</i> | portable_wifi_off |
| <i class="material-icons custom">present_to_all</i> | present_to_all |
| <i class="material-icons custom">ring_volume</i> | ring_volume |
| <i class="material-icons custom">speaker_phone</i> | speaker_phone |
| <i class="material-icons custom">stay_current_landscape</i> | stay_current_landscape |
| <i class="material-icons custom">stay_current_portrait</i> | stay_current_portrait |
| <i class="material-icons custom">stay_primary_landscape</i> | stay_primary_landscape |
| <i class="material-icons custom">stay_primary_portrait</i> | stay_primary_portrait |
| <i class="material-icons custom">swap_calls</i> | swap_calls |
| <i class="material-icons custom">textsms</i> | textsms |
| <i class="material-icons custom">voicemail</i> | voicemail |
| <i class="material-icons custom">vpn_key</i> | vpn_key |
| <i class="material-icons custom">email</i> | |
| <i class="material-icons custom">call_end</i> | call_end |
Material - 内容图标
本章介绍 Google (Material) 内容图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 内容图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的结果：
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">add</i> | add |
| <i class="material-icons custom">add_box</i> | add_box |
| <i class="material-icons custom">add_circle</i> | add_circle |
| <i class="material-icons custom">add_circle_outline</i> | add_circle_outline |
| <i class="material-icons custom">archive</i> | archive |
| <i class="material-icons custom">backspace</i> | backspace |
| <i class="material-icons custom">block</i> | block |
| <i class="material-icons custom">clear</i> | clear |
| <i class="material-icons custom">content_copy</i> | content_copy |
| <i class="material-icons custom">content_cut</i> | content_cut |
| <i class="material-icons custom">content_paste</i> | content_paste |
| <i class="material-icons custom">create</i> | create |
| <i class="material-icons custom">drafts</i> | drafts |
| <i class="material-icons custom">filter_list</i> | filter_list |
| <i class="material-icons custom">flag</i> | flag |
| <i class="material-icons custom">font_download</i> | font_download |
| <i class="material-icons custom">forward</i> | forward |
| <i class="material-icons custom">gesture</i> | gesture |
| <i class="material-icons custom">inbox</i> | inbox |
| <i class="material-icons custom">link</i> | link |
| <i class="material-icons custom">mail</i> | |
| <i class="material-icons custom">markunread</i> | markunread |
| <i class="material-icons custom">redo</i> | redo |
| <i class="material-icons custom">remove</i> | remove |
| <i class="material-icons custom">remove_circle</i> | remove_circle |
| <i class="material-icons custom">remove_circle_outline</i> | remove_circle_outline |
| <i class="material-icons custom">reply</i> | reply |
| <i class="material-icons custom">reply_all</i> | reply_all |
| <i class="material-icons custom">report</i> | report |
| <i class="material-icons custom">save</i> | save |
| <i class="material-icons custom">select_all</i> | select_all |
| <i class="material-icons custom">send</i> | send |
| <i class="material-icons custom">sort</i> | sort |
| <i class="material-icons custom">text_format</i> | text_format |
| <i class="material-icons custom">stay_current_portrait</i> | stay_current_portrait |
| <i class="material-icons custom">undo</i> | undo |
Material - 设备图标
本章介绍 Google (Material) 设备图标的使用方法。假设 **custom** 是 CSS 类名，我们在其中定义了如下所示的大小和颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 设备图标的使用方法和结果。
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">access_alarm</i> | access_alarm |
| <i class="material-icons custom">access_alarms</i> | access_alarms |
| <i class="material-icons custom">access_time</i> | access_time |
| <i class="material-icons custom">add_alarm</i> | add_alarm |
| <i class="material-icons custom">airplanemode_active</i> | airplanemode_active |
| <i class="material-icons custom">airplanemode_inactive</i> | airplanemode_inactive |
| <i class="material-icons custom">battery_alert</i> | battery_alert |
| <i class="material-icons custom">battery_charging_full</i> | battery_charging_full |
| <i class="material-icons custom">battery_full</i> | battery_full |
| <i class="material-icons custom">battery_std</i> | battery_std |
| <i class="material-icons custom">battery_unknown</i> | battery_unknown |
| <i class="material-icons custom">bluetooth</i> | bluetooth |
| <i class="material-icons custom">bluetooth_connected</i> | bluetooth_connected |
| <i class="material-icons custom">bluetooth_disabled</i> | bluetooth_disabled |
| <i class="material-icons custom">bluetooth_searching</i> | bluetooth_searching |
| <i class="material-icons custom">brightness_auto</i> | brightness_auto |
| <i class="material-icons custom">brightness_high</i> | brightness_high |
| <i class="material-icons custom">brightness_low</i> | brightness_low |
| <i class="material-icons custom">brightness_medium</i> | brightness_medium |
| <i class="material-icons custom">data_usage</i> | data_usage |
| <i class="material-icons custom">developer_mode</i> | developer_mode |
| <i class="material-icons custom">devices</i> | devices |
| <i class="material-icons custom">dvr</i> | dvr |
| <i class="material-icons custom">gps_fixed</i> | gps_fixed |
| <i class="material-icons custom">gps_not_fixed</i> | gps_not_fixed |
| <i class="material-icons custom">gps_off</i> | gps_off |
| <i class="material-icons custom">graphic_eq</i> | graphic_eq |
| <i class="material-icons custom">location_disabled</i> | location_disabled |
| <i class="material-icons custom">location_searching</i> | location_searching |
| <i class="material-icons custom">network_cell</i> | network_cell |
| <i class="material-icons custom">network_wifi</i> | network_wifi |
| <i class="material-icons custom">screen_lock_landscape</i> | screen_lock_landscape |
| <i class="material-icons custom">screen_lock_portrait</i> | screen_lock_portrait |
| <i class="material-icons custom">screen_lock_rotation</i> | screen_lock_rotation |
| <i class="material-icons custom">screen_rotation</i> | screen_rotation |
| <i class="material-icons custom">sd_storage</i> | sd_storage |
| <i class="material-icons custom">settings_system_daydream</i> | settings_system_daydream |
| <i class="material-icons custom">signal_cellular_4_bar</i> | signal_cellular_4_bar |
| <i class="material-icons custom">wifi_tethering</i> | wifi_tethering |
| <i class="material-icons custom">signal_cellular_no_sim</i> | signal_cellular_no_sim |
| <i class="material-icons custom">signal_cellular_null</i> | signal_cellular_null |
| <i class="material-icons custom">signal_cellular_off</i> | signal_cellular_off |
| <i class="material-icons custom">signal_wifi_4_bar</i> | signal_wifi_4_bar |
| <i class="material-icons custom">signal_wifi_4_bar_lock</i> | signal_wifi_4_bar_lock |
| <i class="material-icons custom">signal_wifi_off</i> | signal_wifi_off |
| <i class="material-icons custom">storage</i> | storage |
| <i class="material-icons custom">usb</i> | usb |
| <i class="material-icons custom">wallpaper</i> | wallpaper |
| <i class="material-icons custom">widgets</i> | widgets |
| <i class="material-icons custom">wifi_lock</i> | wifi_lock |
| <i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i> | signal_cellular_connected_no_internet_4_bar |
Material - 编辑器图标
本章介绍 Google (Material) 编辑器图标的使用方法。假设 **custom** 是 CSS 类名，我们在其中定义了如下示例中所示的大小和颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 编辑器图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">attach_file</i> | attach_file |
| <i class="material-icons custom">attach_money</i> | attach_money |
| <i class="material-icons custom">border_all</i> | border_all |
| <i class="material-icons custom">border_bottom</i> | border_bottom |
| <i class="material-icons custom">border_clear</i> | border_clear |
| <i class="material-icons custom">border_color</i> | border_color |
| <i class="material-icons custom">border_horizontal</i> | border_horizontal |
| <i class="material-icons custom">border_inner</i> | border_inner |
| <i class="material-icons custom">border_left</i> | border_left |
| <i class="material-icons custom">border_outer</i> | border_outer |
| <i class="material-icons custom">border_right</i> | border_right |
| <i class="material-icons custom">border_style</i> | border_style |
| <i class="material-icons custom">border_top</i> | border_top |
| <i class="material-icons custom">border_vertical</i> | border_vertical |
| <i class="material-icons custom">format_align_center</i> | format_align_center |
| <i class="material-icons custom">format_align_justify</i> | format_align_justify |
| <i class="material-icons custom">format_align_left</i> | format_align_left |
| <i class="material-icons custom">format_align_right</i> | format_align_right |
| <i class="material-icons custom">format_bold</i> | format_bold |
| <i class="material-icons custom">format_clear</i> | format_clear |
| <i class="material-icons custom">format_color_fill</i> | format_color_fill |
| <i class="material-icons custom">format_color_reset</i> | format_color_reset |
| <i class="material-icons custom">format_color_text</i> | format_color_text |
| <i class="material-icons custom">format_indent_decrease</i> | format_indent_decrease |
| <i class="material-icons custom">format_indent_increase</i> | format_indent_increase |
| <i class="material-icons custom">format_italic</i> | format_italic |
| <i class="material-icons custom">format_line_spacing</i> | format_line_spacing |
| <i class="material-icons custom">format_list_bulleted</i> | format_list_bulleted |
| <i class="material-icons custom">format_list_numbered</i> | format_list_numbered |
| <i class="material-icons custom">format_paint</i> | format_paint |
| <i class="material-icons custom">format_quote</i> | format_quote |
| <i class="material-icons custom">format_size</i> | format_size |
| <i class="material-icons custom">format_strikethrough</i> | format_strikethrough |
| <i class="material-icons custom">format_textdirection_l_to_r</i> | format_textdirection_l_to_r |
| <i class="material-icons custom">format_textdirection_r_to_l</i> | format_textdirection_r_to_l |
| <i class="material-icons custom">format_underline</i> | format_underline |
| <i class="material-icons custom">functions</i> | functions |
| <i class="material-icons custom">insert_chart</i> | insert_chart |
| <i class="material-icons custom">insert_comment</i> | insert_comment |
| <i class="material-icons custom">insert_drive_file</i> | insert_drive_file |
| <i class="material-icons custom">insert_emoticon</i> | insert_emoticon |
| <i class="material-icons custom">insert_invitation</i> | insert_invitation |
| <i class="material-icons custom">insert_link</i> | insert_link |
| <i class="material-icons custom">insert_photo</i> | insert_photo |
| <i class="material-icons custom">merge_type</i> | merge_type |
| <i class="material-icons custom">mode_comment</i> | mode_comment |
| <i class="material-icons custom">mode_edit</i> | mode_edit |
| <i class="material-icons custom">money_off</i> | money_off |
| <i class="material-icons custom">publish</i> | publish |
| <i class="material-icons custom">space_bar</i> | space_bar |
| <i class="material-icons custom">strikethrough_s</i> | strikethrough_s |
| <i class="material-icons custom">vertical_align_bottom</i> | vertical_align_bottom |
| <i class="material-icons custom">vertical_align_center</i> | vertical_align_center |
| <i class="material-icons custom">vertical_align_top</i> | vertical_align_top |
| <i class="material-icons custom">wrap_text</i> | wrap_text |
Material - 文件图标
本章介绍 Google (Material) 文件图标的使用方法。假设 **custom** 是 CSS 类名，我们在其中定义了如下示例中所示的大小和颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 文件图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">attachment</i> | attachment |
| <i class="material-icons custom">cloud</i> | cloud |
| <i class="material-icons custom">cloud_circle</i> | cloud_circle |
| <i class="material-icons custom">cloud_done</i> | cloud_done |
| <i class="material-icons custom">cloud_download</i> | cloud_download |
| <i class="material-icons custom">cloud_off</i> | cloud_off |
| <i class="material-icons custom">cloud_queue</i> | cloud_queue |
| <i class="material-icons custom">cloud_upload</i> | cloud_upload |
| <i class="material-icons custom">file_download</i> | file_download |
| <i class="material-icons custom">file_upload</i> | file_upload |
| <i class="material-icons custom">folder</i> | folder |
| <i class="material-icons custom">folder_open</i> | folder_open |
| <i class="material-icons custom">folder_shared</i> | folder_shared |
Material - 硬件图标
本章介绍 Google (Material) 硬件图标的使用方法。假设 **custom** 是 CSS 类名，我们在其中定义了如下示例中所示的大小和颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google (Material) 硬件图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">cast</i> | cast |
| <i class="material-icons custom">cast_connected</i> | cast_connected |
| <i class="material-icons custom">computer</i> | computer |
| <i class="material-icons custom">desktop_mac</i> | desktop_mac |
| <i class="material-icons custom">desktop_windows</i> | desktop_windows |
| <i class="material-icons custom">developer_board</i> | 开发板 |
| <i class="material-icons custom">device_hub</i> | device_hub |
| <i class="material-icons custom">dock</i> | dock |
| <i class="material-icons custom">gamepad</i> | gamepad |
| <i class="material-icons custom">headset</i> | headset |
| <i class="material-icons custom">headset_mic</i> | headset_mic |
| <i class="material-icons custom">keyboard</i> | keyboard |
| <i class="material-icons custom">keyboard_arrow_down</i> | keyboard_arrow_down |
| <i class="material-icons custom">keyboard_arrow_left</i> | keyboard_arrow_left |
| <i class="material-icons custom">keyboard_arrow_right</i> | keyboard_arrow_right |
| <i class="material-icons custom">keyboard_arrow_up</i> | keyboard_arrow_up |
| <i class="material-icons custom">keyboard_backspace</i> | keyboard_backspace |
| <i class="material-icons custom">keyboard_capslock</i> | keyboard_capslock |
| <i class="material-icons custom">keyboard_hide</i> | keyboard_hide |
| <i class="material-icons custom">keyboard_return</i> | keyboard_return |
| <i class="material-icons custom">keyboard_tab</i> | keyboard_tab |
| <i class="material-icons custom">keyboard_voice</i> | keyboard_voice |
| <i class="material-icons custom">laptop</i> | laptop |
| <i class="material-icons custom">laptop_chromebook</i> | laptop_chromebook |
| <i class="material-icons custom">laptop_mac</i> | laptop_mac |
| <i class="material-icons custom">laptop_windows</i> | laptop_windows |
| <i class="material-icons custom">memory</i> | memory |
| <i class="material-icons custom">mouse</i> | mouse |
| <i class="material-icons custom">phone_android</i> | phone_android |
| <i class="material-icons custom">phone_iphone</i> | phone_iphone |
| <i class="material-icons custom">phonelink</i> | phonelink |
| <i class="material-icons custom">phonelink_off</i> | phonelink_off |
| <i class="material-icons custom">power_input</i> | power_input |
| <i class="material-icons custom">router</i> | router |
| <i class="material-icons custom">scanner</i> | scanner |
| <i class="material-icons custom">security</i> | security |
| <i class="material-icons custom">sim_card</i> | sim_card |
| <i class="material-icons custom">smartphone</i> | smartphone |
| <i class="material-icons custom">speaker</i> | speaker |
| <i class="material-icons custom">speaker_group</i> | speaker_group |
| <i class="material-icons custom">tablet</i> | tablet |
| <i class="material-icons custom">tablet_android</i> | tablet_android |
| <i class="material-icons custom">tablet_mac</i> | tablet_mac |
| <i class="material-icons custom">toys</i> | toys |
| <i class="material-icons custom">tv</i> | tv |
| <i class="material-icons custom">watch</i> | watch |
Material - 图片图标
本章介绍 Google 的（Material）图像图标的使用方法。假设**custom** 是我们定义大小和颜色的 CSS 类名，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google 的（Material）图像图标的使用方法和结果。将上述程序的< body >标签替换为表中给出的代码，即可获得相应的输出 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">add_to_photos</i> | add_to_photos |
| <i class="material-icons custom">adjust</i> | adjust |
| <i class="material-icons custom">assistant</i> | assistant |
| <i class="material-icons custom">assistant</i> | assistant |
| <i class="material-icons custom">audiotrack</i> | audiotrack |
| <i class="material-icons custom">blur_circular</i> | blur_circular |
| <i class="material-icons custom">blur_linear</i> | blur_linear |
| <i class="material-icons custom">blur_off</i> | blur_off |
| <i class="material-icons custom">blur_on</i> | blur_on |
| <i class="material-icons custom">brightness_1</i> | brightness_1 |
| <i class="material-icons custom">brightness_2</i> | brightness_2 |
| <i class="material-icons custom">brightness_3</i> | brightness_3 |
| <i class="material-icons custom">brightness_4</i> | brightness_4 |
| <i class="material-icons custom">brightness_5</i> | brightness_5 |
| <i class="material-icons custom">brightness_6</i> | brightness_6 |
| <i class="material-icons custom">brightness_7</i> | brightness_7 |
| <i class="material-icons custom">broken_image</i> | broken_image |
| <i class="material-icons custom">brush</i> | brush |
| <i class="material-icons custom">camera</i> | camera |
| <i class="material-icons custom">camera_alt</i> | camera_alt |
| <i class="material-icons custom">camera_front</i> | camera_front |
| <i class="material-icons custom">camera_rear</i> | camera_rear |
| <i class="material-icons custom">camera_roll</i> | camera_roll |
| <i class="material-icons custom">center_focus_strong</i> | center_focus_strong |
| <i class="material-icons custom">center_focus_weak</i> | center_focus_weak |
| <i class="material-icons custom">collections</i> | collections |
| <i class="material-icons custom">collections_bookmark</i> | collections_bookmark |
| <i class="material-icons custom">color_lens</i> | color_lens |
| <i class="material-icons custom">colorize</i> | colorize |
| <i class="material-icons custom">compare</i> | compare |
| <i class="material-icons custom">control_point</i> | control_point |
| <i class="material-icons custom">control_point_duplicate</i> | control_point_duplicate |
| <i class="material-icons custom">crop</i> | crop |
| <i class="material-icons custom">crop_16_9</i> | crop_16_9 |
| <i class="material-icons custom">crop_3_2</i> | crop_3_2 |
| <i class="material-icons custom">crop_5_4</i> | crop_5_4 |
| <i class="material-icons custom">crop_7_5</i> | crop_7_5 |
| <i class="material-icons custom">crop_din</i> | crop_din |
| <i class="material-icons custom">crop_free</i> | crop_free |
| <i class="material-icons custom">crop_landscape</i> | crop_landscape |
| <i class="material-icons custom">crop_original</i> | crop_original |
| <i class="material-icons custom">crop_portrait</i> | crop_portrait |
| <i class="material-icons custom">crop_square</i> | crop_square |
| <i class="material-icons custom">dehaze</i> | dehaze |
| <i class="material-icons custom">details</i> | details |
| <i class="material-icons custom">edit</i> | edit |
| <i class="material-icons custom">exposure</i> | exposure |
| <i class="material-icons custom">exposure_neg_1</i> | exposure_neg_1 |
| <i class="material-icons custom">exposure_plus_1</i> | exposure_plus_1 |
| <i class="material-icons custom">exposure_plus_2</i> | exposure_plus_2 |
| <i class="material-icons custom">exposure_zero</i> | exposure_zero |
| <i class="material-icons custom">filter</i> | filter |
| <i class="material-icons custom">filter_1</i> | filter_1 |
| <i class="material-icons custom">filter_2</i> | filter_2 |
| <i class="material-icons custom">filter_3</i> | filter_3 |
| <i class="material-icons custom">filter_4</i> | filter_4 |
| <i class="material-icons custom">filter_5</i> | filter_5 |
| <i class="material-icons custom">filter_6</i> | filter_6 |
| <i class="material-icons custom">filter_7</i> | filter_7 |
| <i class="material-icons custom">filter_8</i> | filter_8 |
| <i class="material-icons custom">filter_9</i> | filter_9 |
| <i class="material-icons custom">filter_9_plus</i> | filter_9_plus |
| <i class="material-icons custom">filter_b_and_w</i> | filter_b_and_w |
| <i class="material-icons custom">filter_center_focus</i> | filter_center_focus |
| <i class="material-icons custom">filter_drama</i> | filter_drama |
| <i class="material-icons custom">filter_frames</i> | filter_frames |
| <i class="material-icons custom">filter_hdr</i> | filter_hdr |
| <i class="material-icons custom">filter_none</i> | filter_none |
| <i class="material-icons custom">filter_tilt_shift</i> | filter_tilt_shift |
| <i class="material-icons custom">filter_vintage</i> | filter_vintage |
| <i class="material-icons custom">flare</i> | flare |
| <i class="material-icons custom">flash_auto</i> | flash_auto |
| <i class="material-icons custom">flash_off</i> | flash_off |
| <i class="material-icons custom">flash_on</i> | flash_on |
| <i class="material-icons custom">flip</i> | flip |
| <i class="material-icons custom">gradient</i> | gradient |
| <i class="material-icons custom">grain</i> | grain |
| <i class="material-icons custom">grid_off</i> | grid_off |
| <i class="material-icons custom">grid_on</i> | grid_on |
| <i class="material-icons custom">hdr_off</i> | hdr_off |
| <i class="material-icons custom">hdr_on</i> | hdr_on |
| <i class="material-icons custom">hdr_strong</i> | hdr_strong |
| <i class="material-icons custom">hdr_weak</i> | hdr_weak |
| <i class="material-icons custom">healing</i> | healing |
| <i class="material-icons custom">image</i> | image |
| <i class="material-icons custom">image_aspect_ratio</i> | image_aspect_ratio |
| <i class="material-icons custom">iso</i> | iso |
| <i class="material-icons custom">landscape</i> | landscape |
| <i class="material-icons custom">leak_add</i> | leak_add |
| <i class="material-icons custom">leak_remove</i> | leak_remove |
| <i class="material-icons custom">lens</i> | lens |
| <i class="material-icons custom">looks</i> | looks |
| <i class="material-icons custom">looks_3</i> | looks_3 |
| <i class="material-icons custom">looks_4</i> | looks_4 |
| <i class="material-icons custom">looks_5</i> | looks_5 |
| <i class="material-icons custom">looks_6</i> | looks_6 |
| <i class="material-icons custom">looks_one</i> | looks_one |
| <i class="material-icons custom">looks_two</i> | looks_two |
| <i class="material-icons custom">loupe</i> | loupe |
| <i class="material-icons custom">monochrome_photos</i> | monochrome_photos |
| <i class="material-icons custom">movie_creation</i> | movie_creation |
| <i class="material-icons custom">music_note</i> | music_note |
| <i class="material-icons custom">nature</i> | nature |
| <i class="material-icons custom">nature_people</i> | nature_people |
| <i class="material-icons custom">wb_sunny</i> | wb_sunny |
| <i class="material-icons custom">navigate_next</i> | navigate_next |
| <i class="material-icons custom">navigate_before</i> | navigate_before |
| <i class="material-icons custom">palette</i> | palette |
| <i class="material-icons custom">panorama</i> | panorama |
| <i class="material-icons custom">panorama_fish_eye</i> | panorama_fish_eye |
| <i class="material-icons custom">panorama_horizontal</i> | panorama_horizontal |
| <i class="material-icons custom">panorama_vertical</i> | panorama_vertical |
| <i class="material-icons custom">panorama_wide_angle</i> | panorama_wide_angle |
| <i class="material-icons custom">photo</i> | photo |
| <i class="material-icons custom">photo_album</i> | photo_album |
| <i class="material-icons custom">photo_camera</i> | photo_camera |
| <i class="material-icons custom">photo_library</i> | photo_library |
| <i class="material-icons custom">photo_size_select_actual</i> | photo_size_select_actual |
| <i class="material-icons custom">photo_size_select_large</i> | photo_size_select_large |
| <i class="material-icons custom">photo_size_select_small</i> | photo_size_select_small |
| <i class="material-icons custom">picture_as_pdf</i> | picture_as_pdf |
| <i class="material-icons custom">portrait</i> | portrait |
| <i class="material-icons custom">remove_red_eye</i> | remove_red_eye |
| <i class="material-icons custom">rotate_90_degrees_ccw</i> | rotate_90_degrees_ccw |
| <i class="material-icons custom">rotate_left</i> | rotate_left |
| <i class="material-icons custom">rotate_right</i> | 向右旋转 |
| <i class="material-icons custom">slideshow</i> | slideshow |
| <i class="material-icons custom">straighten</i> | 拉直 |
| <i class="material-icons custom">style</i> | 风格 |
| <i class="material-icons custom">switch_camera</i> | 切换摄像头 |
| <i class="material-icons custom">switch_video</i> | 切换视频 |
| <i class="material-icons custom">tag_faces</i> | 人脸标签 |
| <i class="material-icons custom">texture</i> | 纹理 |
| <i class="material-icons custom">timelapse</i> | 延时摄影 |
| <i class="material-icons custom">timer</i> | 计时器 |
| <i class="material-icons custom">timer_10</i> | 10 秒计时器 |
| <i class="material-icons custom">timer_3</i> | 3 秒计时器 |
| <i class="material-icons custom">timer_off</i> | 计时器关闭 |
| <i class="material-icons custom">tonality</i> | 色调 |
| <i class="material-icons custom">transform</i> | 变换 |
| <i class="material-icons custom">tune</i> | 调整 |
| <i class="material-icons custom">view_comfy</i> | 舒适视图 |
| <i class="material-icons custom">view_compact</i> | 紧凑视图 |
| <i class="material-icons custom">vignette</i> | 暗角效果 |
| <i class="material-icons custom">wb_auto</i> | 自动白平衡 |
| <i class="material-icons custom">wb_cloudy</i> | 阴天白平衡 |
| <i class="material-icons custom">wb_incandescent</i> | 白炽灯白平衡 |
| <i class="material-icons custom">wb_iridescent</i> | 彩虹白平衡 |
Material - 地图图标
本章解释了 Google（Material）地图图标的使用方法。假设custom是 CSS 类名，我们在其中定义了大小和颜色，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（Material）地图图标的使用方法和结果。将上述程序的< body >标签替换为表中给出的代码，即可获得相应的输出结果 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">beenhere</i> | 去过这里 |
| <i class="material-icons custom">directions</i> | 路线 |
| <i class="material-icons custom">directions_bike</i> | 自行车路线 |
| <i class="material-icons custom">directions_boat</i> | 船只路线 |
| <i class="material-icons custom">directions_bus</i> | 公交路线 |
| <i class="material-icons custom">directions_car</i> | 驾车路线 |
| <i class="material-icons custom">directions_railway</i> | 火车路线 |
| <i class="material-icons custom">directions_run</i> | 跑步路线 |
| <i class="material-icons custom">directions_subway</i> | 地铁路线 |
| <i class="material-icons custom">directions_transit</i> | 交通路线 |
| <i class="material-icons custom">directions_walk</i> | 步行路线 |
| <i class="material-icons custom">flight</i> | 航班 |
| <i class="material-icons custom">hotel</i> | 酒店 |
| <i class="material-icons custom">layers</i> | 图层 |
| <i class="material-icons custom">layers_clear</i> | 清除图层 |
| <i class="material-icons custom">local_activity</i> | 本地活动 |
| <i class="material-icons custom">local_airport</i> | 本地机场 |
| <i class="material-icons custom">local_atm</i> | 本地自动取款机 |
| <i class="material-icons custom">local_bar</i> | 本地酒吧 |
| <i class="material-icons custom">local_cafe</i> | 本地咖啡馆 |
| <i class="material-icons custom">local_car_wash</i> | 本地洗车店 |
| <i class="material-icons custom">local_convenience_store</i> | 本地便利店 |
| <i class="material-icons custom">local_dining</i> | 本地餐厅 |
| <i class="material-icons custom">local_drink</i> | 本地饮品 |
| <i class="material-icons custom">local_florist</i> | 本地花店 |
| <i class="material-icons custom">local_gas_station</i> | 本地加油站 |
| <i class="material-icons custom">local_grocery_store</i> | 本地杂货店 |
| <i class="material-icons custom">local_hospital</i> | 本地医院 |
| <i class="material-icons custom">local_hotel</i> | 本地酒店 |
| <i class="material-icons custom">local_laundry_service</i> | 本地洗衣店 |
| <i class="material-icons custom">local_library</i> | 本地图书馆 |
| <i class="material-icons custom">local_mall</i> | 本地购物中心 |
| <i class="material-icons custom">local_movies</i> | 本地电影院 |
| <i class="material-icons custom">local_offer</i> | 本地优惠 |
| <i class="material-icons custom">local_parking</i> | 本地停车场 |
| <i class="material-icons custom">local_pharmacy</i> | 本地药店 |
| <i class="material-icons custom">local_phone</i> | 本地电话 |
| <i class="material-icons custom">local_pizza</i> | 本地比萨店 |
| <i class="material-icons custom">local_play</i> | 本地播放 |
| <i class="material-icons custom">local_post_office</i> | 本地邮局 |
| <i class="material-icons custom">local_printshop</i> | 本地印刷店 |
| <i class="material-icons custom">local_see</i> | 本地景点 |
| <i class="material-icons custom">local_shipping</i> | 本地运输 |
| <i class="material-icons custom">local_taxi</i> | 本地出租车 |
| <i class="material-icons custom">map</i> | 地图 |
| <i class="material-icons custom">my_location</i> | 我的位置 |
| <i class="material-icons custom">navigation</i> | 导航 |
| <i class="material-icons custom">person_pin</i> | 人物图钉 |
| <i class="material-icons custom">pin_drop</i> | 放置图钉 |
| <i class="material-icons custom">place</i> | 地点 |
| <i class="material-icons custom">rate_review</i> | 评价 |
| <i class="material-icons custom">restaurant_menu</i> | 餐厅菜单 |
| <i class="material-icons custom">satellite</i> | 卫星 |
| <i class="material-icons custom">store_mall_directory</i> | 购物中心目录 |
| <i class="material-icons custom">traffic</i> | 交通 |
| <i class="material-icons custom">terrain</i> | 地形 |
Material - 导航图标
本章解释了 Google（Material）导航图标的使用方法。假设custom是 CSS 类名，我们在其中定义了大小和颜色，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（Material）导航图标的使用方法和结果。将上述程序的< body >标签替换为表中给出的代码，即可获得相应的输出结果 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">apps</i> | 应用 |
| <i class="material-icons custom">arrow_back</i> | 返回箭头 |
| <i class="material-icons custom">arrow_drop_down</i> | 向下箭头 |
| <i class="material-icons custom">arrow_drop_down_circle</i> | 向下圆形箭头 |
| <i class="material-icons custom">arrow_drop_up</i> | 向上箭头 |
| <i class="material-icons custom">arrow_forward</i> | 前进箭头 |
| <i class="material-icons custom">cancel</i> | 取消 |
| <i class="material-icons custom">check</i> | 选中 |
| <i class="material-icons custom">chevron_left</i> | 左箭头 |
| <i class="material-icons custom">chevron_right</i> | 右箭头 |
| <i class="material-icons custom">close</i> | 关闭 |
| <i class="material-icons custom">expand_less</i> | 收起 |
| <i class="material-icons custom">expand_more</i> | 展开 |
| <i class="material-icons custom">fullscreen</i> | 全屏 |
| <i class="material-icons custom">fullscreen_exit</i> | 退出全屏 |
| <i class="material-icons custom">menu</i> | 菜单 |
| <i class="material-icons custom">more_horiz</i> | 更多水平 |
| <i class="material-icons custom">more_vert</i> | 更多垂直 |
| <i class="material-icons custom">refresh</i> | 刷新 |
Material - 通知图标
本章解释了 Google（Material）通知图标的使用方法。假设custom是 CSS 类名，我们在其中定义了大小和颜色，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（Material）通知图标的使用方法和结果。将上述程序的< body >标签替换为表中给出的代码，即可获得相应的输出结果 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">adb</i> | Android 调试桥 |
| <i class="material-icons custom">airline_seat_flat</i> | 平躺式座椅 |
| <i class="material-icons custom">airline_seat_flat_angled</i> | 倾斜式平躺座椅 |
| <i class="material-icons custom">airline_seat_individual_suite</i> | 独立套房座椅 |
| <i class="material-icons custom">airline_seat_legroom_reduced</i> | 腿部空间受限座椅 |
| <i class="material-icons custom">airline_seat_recline_extra</i> | 可额外倾斜座椅 |
| <i class="material-icons custom">airline_seat_recline_normal</i> | 正常倾斜座椅 |
| <i class="material-icons custom">bluetooth_audio</i> | 蓝牙音频 |
| <i class="material-icons custom">confirmation_number</i> | 确认号码 |
| <i class="material-icons custom">disc_full</i> | 磁盘已满 |
| <i class="material-icons custom">do_not_disturb</i> | 请勿打扰 |
| <i class="material-icons custom">do_not_disturb_alt</i> | 勿扰模式 |
| <i class="material-icons custom">drive_eta</i> | 预计到达时间 |
| <i class="material-icons custom">event_available</i> | 事件可用 |
| <i class="material-icons custom">event_busy</i> | 事件繁忙 |
| <i class="material-icons custom">event_note</i> | 事件备注 |
| <i class="material-icons custom">folder_special</i> | 特殊文件夹 |
| <i class="material-icons custom">live_tv</i> | 直播电视 |
| <i class="material-icons custom">mms</i> | 彩信 |
| <i class="material-icons custom">more</i> | 更多 |
| <i class="material-icons custom">network_locked</i> | 网络锁定 |
| <i class="material-icons custom">ondemand_video</i> | 点播视频 |
| <i class="material-icons custom">personal_video</i> | 个人视频 |
| <i class="material-icons custom">phone_bluetooth_speaker</i> | 手机蓝牙扬声器 |
| <i class="material-icons custom">phone_forwarded</i> | 电话转发 |
| <i class="material-icons custom">phone_in_talk</i> | 通话中 |
| <i class="material-icons custom">phone_locked</i> | 手机已锁定 |
| <i class="material-icons custom">phone_missed</i> | 未接来电 |
| <i class="material-icons custom">phone_paused</i> | 电话暂停 |
| <i class="material-icons custom">power</i> | 电源 |
| <i class="material-icons custom">sd_card</i> | SD 卡 |
| <i class="material-icons custom">sim_card_alert</i> | SIM 卡警告 |
| <i class="material-icons custom">sms</i> | 短信 |
| <i class="material-icons custom">sms_failed</i> | 短信发送失败 |
| <i class="material-icons custom">sync</i> | 同步 |
| <i class="material-icons custom">sync_disabled</i> | 同步已禁用 |
| <i class="material-icons custom">sync_problem</i> | 同步问题 |
| <i class="material-icons custom">system_update</i> | 系统更新 |
| <i class="material-icons custom">tap_and_play</i> | 轻触播放 |
| <i class="material-icons custom">time_to_leave</i> | 该出发了 |
| <i class="material-icons custom">vibration</i> | 振动 |
| <i class="material-icons custom">voice_chat</i> | 语音聊天 |
| <i class="material-icons custom">vpn_lock</i> | VPN 锁定 |
| <i class="material-icons custom">wc</i> | 洗手间 |
| <i class="material-icons custom">wifi</i> | WiFi |
Material - 社交图标
本章解释了 Google（Material）社交图标的使用方法。假设custom是 CSS 类名，我们在其中定义了大小和颜色，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（Material）社交图标的使用方法和结果。将上述程序的< body >标签替换为表中给出的代码，即可获得相应的输出结果 -
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">cake</i> | 蛋糕 |
| <i class="material-icons custom">domain</i> | 域名 |
| <i class="material-icons custom">group</i> | 群组 |
| <i class="material-icons custom">group_add</i> | 添加群组 |
| <i class="material-icons custom">location_city</i> | 城市位置 |
| <i class="material-icons custom">mood</i> | 心情 |
| <i class="material-icons custom">mood_bad</i> | 糟糕的心情 |
| <i class="material-icons custom">notifications</i> | 通知 |
| <i class="material-icons custom">notifications_active</i> | 活动通知 |
| <i class="material-icons custom">notifications_none</i> | 无通知 |
| <i class="material-icons custom">notifications_off</i> | 通知关闭 |
| <i class="material-icons custom">notifications_paused</i> | 通知暂停 |
| <i class="material-icons custom">pages</i> | 页面 |
| <i class="material-icons custom">party_mode</i> | 派对模式 |
| <i class="material-icons custom">people</i> | 人员 |
| <i class="material-icons custom">people_outline</i> | 人员轮廓 |
| <i class="material-icons custom">person</i> | 个人 |
| <i class="material-icons custom">person_add</i> | 添加人员 |
| <i class="material-icons custom">person_outline</i> | 个人轮廓 |
| <i class="material-icons custom">plus_one</i> | 加一 |
| <i class="material-icons custom">poll</i> | 投票 |
| <i class="material-icons custom">public</i> | 公开 |
| <i class="material-icons custom">school</i> | 学校 |
| <i class="material-icons custom">share</i> | 分享 |
| <i class="material-icons custom">whatshot</i> | 热门 |
Material - 切换图标
本章介绍 Google（Material）切换图标的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下面的示例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google（Material）切换图标的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出。
| 用法 | 结果 |
|---|---|
| <i class="material-icons custom">check_box</i> | 复选框 |
| <i class="material-icons custom">check_box_outline_blank</i> | 空复选框 |
| <i class="material-icons custom">indeterminate_check_box</i> | 不确定复选框 |
| <i class="material-icons custom">radio_button_checked</i> | 选中单选按钮 |
| <i class="material-icons custom">radio_button_unchecked</i> | 未选中单选按钮 |
| <i class="material-icons custom">star</i> | 星标 |
| <i class="material-icons custom">star_border</i> | 星标边框 |
| <i class="material-icons custom">star_half</i> | 半星 |
Bootstrap Glyphicons
这是一个以光栅图像格式、矢量图像格式和字体格式提供的单色图标库。它以字体格式提供了 250 多个字形。您可以在您的 Web 项目中使用这些字体。但是这些字形不是免费的，如果您在基于 Bootstrap 的项目中使用它们，则无需支付任何费用。
加载字体（库）
要加载 Bootstrap Glyphicons 库，请复制并粘贴以下行到网页的 <head> 部分。
<head> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head>
使用图标
Bootstrap Glyphicons 提供了许多图标。选择其中一个，并将图标类名添加到 < body > 标记内的任何 HTML 元素中。在下面的示例中，我们使用了树的图标，其类名为 **tree-deciduous**。
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>
它将产生以下输出：
定义大小
您可以通过在 CSS 中定义其大小并在类名中使用它来增加或减小图标的大小，如下所示。在下面的示例中，我们已将大小定义为 6em。
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
它将产生以下输出
定义颜色
您可以使用 CSS 定义图标的颜色。以下示例显示了如何更改树形图标的颜色。
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
它将产生以下输出：
Bootstrap 组件
本章介绍 Bootstrap Glyphicons（组件）的使用方法。假设 **custom** 是我们定义大小和颜色的 CSS 类名，如下面的示例所示。
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<i.custom {font-size: 2em; color: blue;}>
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous custom"></i>
</body>
</html>
下表包含 Bootstrap Glyphicons（组件）的使用方法和结果。将上述程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出。
| 用法 | 结果 |
|---|---|
| <i class="glyphicon glyphicon-asterisk custom"></i> | |
| <i class="glyphicon glyphicon-plus custom"></i> | |
| <i class="glyphicon glyphicon-euro custom"></i> | |
| <i class="glyphicon glyphicon-minus custom"></i> | |
| <i class="glyphicon glyphicon-cloud custom"></i> | |
| <i class="glyphicon glyphicon-envelope custom"></i> | |
| <i class="glyphicon glyphicon-pencil custom"></i> | |
| <i class="glyphicon glyphicon-glass custom"></i> | |
| <i class="glyphicon glyphicon-music custom"></i> | |
| <i class="glyphicon glyphicon-search custom"></i> | |
| <i class="glyphicon glyphicon-heart custom"></i> | |
| <i class="glyphicon glyphicon-star custom"></i> | |
| <i class="glyphicon glyphicon-star-empty custom"></i> | |
| <i class="glyphicon glyphicon-user custom"></i> | |
| <i class="glyphicon glyphicon-film custom"></i> | |
| <i class="glyphicon glyphicon-th-large custom"></i> | |
| <i class="glyphicon glyphicon-th custom"></i> | |
| <i class="glyphicon glyphicon-th-list custom"></i> | |
| <i class="glyphicon glyphicon-ok custom"></i> | |
| <i class="glyphicon glyphicon-remove custom"></i> | |
| <i class="glyphicon glyphicon-zoom-in custom"></i> | |
| <i class="glyphicon glyphicon-zoom-out custom"></i> | |
| <i class="glyphicon glyphicon-off custom"></i> | |
| <i class="glyphicon glyphicon-signal custom"></i> | |
| <i class="glyphicon glyphicon-cog custom"></i> | |
| <i class="glyphicon glyphicon-trash custom"></i> | |
| <i class="glyphicon glyphicon-home custom"></i> | |
| <i class="glyphicon glyphicon-file custom"></i> | |
| <i class="glyphicon glyphicon-time custom"></i> | |
| <i class="glyphicon glyphicon-road custom"></i> | |
| <i class="glyphicon glyphicon-download-alt custom"></i> | |
| <i class="glyphicon glyphicon-download custom"></i> | |
| <i class="glyphicon glyphicon-upload custom"></i> | |
| <i class="glyphicon glyphicon-inbox custom"></i> | |
| <i class="glyphicon glyphicon-play-circle custom"></i> | |
| <i class="glyphicon glyphicon-repeat custom"></i> | |
| <i class="glyphicon glyphicon-refresh custom"></i> | |
| <i class="glyphicon glyphicon-list-alt custom"></i> | |
| <i class="glyphicon glyphicon-lock custom"></i> | |
| <i class="glyphicon glyphicon-flag custom"></i> | |
| <i class="glyphicon glyphicon-headphones custom"></i> | |
| <i class="glyphicon glyphicon-volume-off custom"></i> | |
| <i class="glyphicon glyphicon-volume-down custom"></i> | |
| <i class="glyphicon glyphicon-volume-up custom"></i> | |
| <i class="glyphicon glyphicon-qrcode custom"></i> | |
| <i class="glyphicon glyphicon-barcode custom"></i> | |
| <i class="glyphicon glyphicon-tag custom"></i> | |
| <i class="glyphicon glyphicon-tags custom"></i> | |
| <i class="glyphicon glyphicon-book custom"></i> | |
| <i class="glyphicon glyphicon-bookmark custom"></i> | |
| <i class="glyphicon glyphicon-print custom"></i> | |
| <i class="glyphicon glyphicon-camera custom"></i> | |
| <i class="glyphicon glyphicon-font custom"></i> | |
| <i class="glyphicon glyphicon-bold custom"></i> | |
| <i class="glyphicon glyphicon-italic custom"></i> | |
| <i class="glyphicon glyphicon-text-height custom"></i> | |
| <i class="glyphicon glyphicon-text-width custom"></i> | |
| <i class="glyphicon glyphicon-align-left custom"></i> | |
| <i class="glyphicon glyphicon-align-center custom"></i> | |
| <i class="glyphicon glyphicon-align-right custom"></i> | |
| <i class="glyphicon glyphicon-align-justify custom"></i> | |
| <i class="glyphicon glyphicon-list custom"></i> | |
| <i class="glyphicon glyphicon-indent-left custom"></i> | |
| <i class="glyphicon glyphicon-indent-right custom"></i> | |
| <i class="glyphicon glyphicon-facetime-video custom"></i> | |
| <i class="glyphicon glyphicon-picture custom"></i> | |
| <i class="glyphicon glyphicon-map-marker custom"></i> | |
| <i class="glyphicon glyphicon-adjust custom"></i> | |
| <i class="glyphicon glyphicon-tint custom"></i> | |
| <i class="glyphicon glyphicon-edit custom"></i> | |
| <i class="glyphicon glyphicon-share custom"></i> | |
| <i class="glyphicon glyphicon-check custom"></i> | |
| <i class="glyphicon glyphicon-move custom"></i> | |
| <i class="glyphicon glyphicon-step-backward custom"></i> | |
| <i class="glyphicon glyphicon-fast-backward custom"></i> | |
| <i class="glyphicon glyphicon-backward custom"></i> | |
| <i class="glyphicon glyphicon-play custom"></i> | |
| <i class="glyphicon glyphicon-pause custom"></i> | |
| <i class="glyphicon glyphicon-stop custom"></i> | |
| <i class="glyphicon glyphicon-forward custom"></i> | |
| <i class="glyphicon glyphicon-fast-forward custom"></i> | |
| <i class="glyphicon glyphicon-step-forward custom"></i> | |
| <i class="glyphicon glyphicon-eject custom"></i> | |
| <i class="glyphicon glyphicon-chevron-left custom"></i> | |
| <i class="glyphicon glyphicon-chevron-right custom"></i> | |
| <i class="glyphicon glyphicon-plus-sign custom"></i> | |
| <i class="glyphicon glyphicon-minus-sign custom"></i> | |
| <i class="glyphicon glyphicon-remove-sign custom"></i> | |
| <i class="glyphicon glyphicon-ok-sign custom"></i> | |
| <i class="glyphicon glyphicon-question-sign custom"></i> | |
| <i class="glyphicon glyphicon-info-sign custom"></i> | |
| <i class="glyphicon glyphicon-screenshot custom"></i> | |
| <i class="glyphicon glyphicon-remove-circle custom"></i> | |
| <i class="glyphicon glyphicon-ok-circle custom"></i> | |
| <i class="glyphicon glyphicon-ban-circle custom"></i> | |
| <i class="glyphicon glyphicon-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-share-alt custom"></i> | |
| <i class="glyphicon glyphicon-resize-full custom"></i> | |
| <i class="glyphicon glyphicon-resize-small custom"></i> | |
| <i class="glyphicon glyphicon-exclamation-sign custom"></i> | |
| <i class="glyphicon glyphicon-gift custom"></i> | |
| <i class="glyphicon glyphicon-leaf custom"></i> | |
| <i class="glyphicon glyphicon-fire custom"></i> | |
| <i class="glyphicon glyphicon-eye-open custom"></i> | |
| <i class="glyphicon glyphicon-eye-close custom"></i> | |
| <i class="glyphicon glyphicon-warning-sign custom"></i> | |
| <i class="glyphicon glyphicon-plane custom"></i> | |
| <i class="glyphicon glyphicon-calendar custom"></i> | |
| <i class="glyphicon glyphicon-random custom"></i> | |
| <i class="glyphicon glyphicon-comment custom"></i> | |
| <i class="glyphicon glyphicon-magnet custom"></i> | |
| <i class="glyphicon glyphicon-chevron-up custom"></i> | |
| <i class="glyphicon glyphicon-chevron-down custom"></i> | |
| <i class="glyphicon glyphicon-retweet custom"></i> | |
| <i class="glyphicon glyphicon-shopping-cart custom"></i> | |
| <i class="glyphicon glyphicon-folder-close custom"></i> | |
| <i class="glyphicon glyphicon-folder-open custom"></i> | |
| <i class="glyphicon glyphicon-resize-vertical custom"></i> | |
| <i class="glyphicon glyphicon-resize-horizontal custom"></i> | |
| <i class="glyphicon glyphicon-hdd custom"></i> | |
| <i class="glyphicon glyphicon-bullhorn custom"></i> | |
| <i class="glyphicon glyphicon-bell custom"></i> | |
| <i class="glyphicon glyphicon-certificate custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-up custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-down custom"></i> | |
| <i class="glyphicon glyphicon-hand-right custom"></i> | |
| <i class="glyphicon glyphicon-hand-left custom"></i> | |
| <i class="glyphicon glyphicon-hand-up custom"></i> | |
| <i class="glyphicon glyphicon-hand-down custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-globe custom"></i> | |
| <i class="glyphicon glyphicon-wrench custom"></i> | |
| <i class="glyphicon glyphicon-tasks custom"></i> | |
| <i class="glyphicon glyphicon-filter custom"></i> | |
| <i class="glyphicon glyphicon-briefcase custom"></i> | |
| <i class="glyphicon glyphicon-fullscreen custom"></i> | |
| <i class="glyphicon glyphicon-dashboard custom"></i> | |
| <i class="glyphicon glyphicon-paperclip custom"></i> | |
| <i class="glyphicon glyphicon-heart-empty custom"></i> | |
| <i class="glyphicon glyphicon-link custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-pushpin custom"></i> | |
| <i class="glyphicon glyphicon-usd custom"></i> | |
| <i class="glyphicon glyphicon-gbp custom"></i> | |
| <i class="glyphicon glyphicon-sort custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i> | |
| <i class="glyphicon glyphicon-unchecked custom"></i> | |
| <i class="glyphicon glyphicon-expand custom"></i> | |
| <i class="glyphicon glyphicon-collapse-down custom"></i> | |
| <i class="glyphicon glyphicon-collapse-up custom"></i> | |
| <i class="glyphicon glyphicon-log-in custom"></i> | |
| <i class="glyphicon glyphicon-flash custom"></i> | |
| <i class="glyphicon glyphicon-log-out custom"></i> | |
| <i class="glyphicon glyphicon-new-window custom"></i> | |
| <i class="glyphicon glyphicon-record custom"></i> | |
| <i class="glyphicon glyphicon-save custom"></i> | |
| <i class="glyphicon glyphicon-open custom"></i> | |
| <i class="glyphicon glyphicon-saved custom"></i> | |
| <i class="glyphicon glyphicon-import custom"></i> | |
| <i class="glyphicon glyphicon-export custom"></i> | |
| <i class="glyphicon glyphicon-send custom"></i> | |
| <i class="glyphicon glyphicon-floppy-disk custom"></i> | |
| <i class="glyphicon glyphicon-floppy-saved custom"></i> | |
| <i class="glyphicon glyphicon-floppy-remove custom"></i> | |
| <i class="glyphicon glyphicon-floppy-save custom"></i> | |
| <i class="glyphicon glyphicon-floppy-open custom"></i> | |
| <i class="glyphicon glyphicon-credit-card custom"></i> | |
| <i class="glyphicon glyphicon-transfer custom"></i> | |
| <i class="glyphicon glyphicon-cutlery custom"></i> | |
| <i class="glyphicon glyphicon-header custom"></i> | |
| <i class="glyphicon glyphicon-compressed custom"></i> | |
| <i class="glyphicon glyphicon-earphone custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-tower custom"></i> | |
| <i class="glyphicon glyphicon-stats custom"></i> | |
| <i class="glyphicon glyphicon-sd-video custom"></i> | |
| <i class="glyphicon glyphicon-hd-video custom"></i> | |
| <i class="glyphicon glyphicon-subtitles custom"></i> | |
| <i class="glyphicon glyphicon-sound-stereo custom"></i> | |
| <i class="glyphicon glyphicon-sound-dolby custom"></i> | |
| <i class="glyphicon glyphicon-sound-5-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-6-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-7-1 custom"></i> | |
| <i class="glyphicon glyphicon-copyright-mark custom"></i> | |
| <i class="glyphicon glyphicon-registration-mark custom"></i> | |
| <i class="glyphicon glyphicon-cloud-download custom"></i> | |
| <i class="glyphicon glyphicon-cloud-upload custom"></i> | |
| <i class="glyphicon glyphicon-tree-conifer custom"></i> | |
| <i class="glyphicon glyphicon-tree-deciduous custom"></i> |
广告