Web 图标 - 快速指南

Web 图标 - 简介

图标是用于表示网页上的特定操作或功能的符号。图标用于文档和应用程序，它们可以是可选择的，也可以是不可选择的。例如，我们在应用程序的按钮上看到的图像都是图标，并且这些按钮是可选择的。同样，当我们使用图标作为公司徽标时，它通常是不可选择的。

在Windows环境下，如果我们将系统音量静音，则会以图标的形式表示，如下图。

沉默的

使用网络图标，我们可以表示加载页面、禁用选项、链接、重定向等。这些图标可以翻转、旋转、调整大小、加边框、反转和着色。

图标字体

图标字体包含符号和字形。加载所需的字体后，您可以使用该字体提供的任何图标（使用图标的类名称）。我们还可以对图标应用不同的颜色，并使用 CSS 属性调整它们的大小。有几个提供图标的图标库（字体）。本教程重点介绍三种主要字体，即 -

  • 字体真棒
  • Bootstrap 字形
  • 谷歌的材质图标

字体真棒

此字体提供 519 个免费可缩放矢量图标。该库完全免费，可供个人和商业用途。这些图标可以轻松定制。最初，它们是为 Bootstrap 开发的。

Bootstrap 字形

这是一个单色图标库，提供光栅图像格式、矢量图像格式和字体。它提供了超过 250 个字体格式的字形。您可以在您的 Web 项目中使用这些字体。这些图标不是免费的，但是您可以在基于 Bootstrap 的项目中使用它们，而无需购买它们。

谷歌的材质图标

Google 提供了大约 750 个根据“材料设计指南”设计的图标，这些图标被称为材料设计图标。这些图标很简单，并且支持所有现代网络浏览器。由于这些图标是基于矢量的，因此它们也是可缩放的。要使用这些图标，我们必须加载字体（库）material-icons。

字体真棒图标

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 定义图标的大小并将其与类名称一起使用来增大或减小图标的大小，如下所示。在给定的示例中，我们将尺寸声明为 6 em。

现场演示 
<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-调整自定义"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-archive custom"></i>
<i class="fa fa-area-chart custom"></i>
<i class="fa fa-arrows 自定义"></i>
<i class="fa fa-arrows-h 自定义"></i>
<i class="fa fa-arrows-v 自定义"></i>
<i class="fa fa-asterisk custom"></i>
<i class="fa fa-at custom"></i>
<i class="fa fa-automobile custom"></i>
<i class="fa fa-balance-scale custom"></i>
<i class="fa fa-ban custom"></i>
<i class="fa fa-bank custom"></i>
<i class="fa fa-bar-chart custom"></i>
<i class="fa fa-bar-chart-o 自定义"></i>
<i class="fa fa-barcode custom"></i>
<i class="fa fa-bars 自定义"></i>
<i class="fa fa-bed custom"></i>
<i class="fa fa-beer custom"></i>
<i class="fa fa-bell custom"></i>
<i class="fa fa-wrench custom"></i>
<i class="fa fa-bell-o custom"></i>
<i class="fa fa-bell-slash custom"></i>
<i class="fa fa-bell-slash-o custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-battery-0 自定义"></i>
<i class="fa fa-battery-1 自定义"></i>
<i class="fa fa-battery-2 自定义"></i>
<i class="fa fa-battery-3 自定义"></i>
<i class="fa fa-battery-4 自定义"></i>
<i class="fa fa-battery-empty custom"></i>
<i class="fa fa-battery-quarter custom"></i>
<i class="fa fa-battery-half custom"></i>
<i class="fa fa-电池-四分之三定制"></i>
<i class="fa fa-battery-full custom"></i>
<i class="fa fa-birthday-cake custom"></i>
<i class="fa fa-bolt 自定义"></i>
<i class="fa fa-bomb custom"></i>
<i class="fa fa-book custom"></i>
<i class="fa fa-书签自定义"></i>
<i class="fa fa-bookmark-o custom"></i>
<i class="fa fa-briefcase custom"></i>
<i class="fa fa-bug 自定义"></i>
<i class="fa fa-building custom"></i>
<i class="fa fa-building-o custom"></i>
<i class="fa fa-bullhorn custom"></i>
<i class="fa fa-bullseye custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab 自定义"></i>
<i class="fa fa-video-camera 自定义"></i>
<i class="fa fa-calendar custom"></i>
<i class="fa fa-calendar-check-o custom"></i>
<i class="fa fa-calendar-minus-o custom"></i>
<i class="fa fa-calendar-o custom"></i>
<i class="fa fa-calendar-plus-o custom"></i>
<i class="fa fa-calendar-times-o custom"></i>
<i class="fa fa-camera 自定义"></i>
<i class="fa fa-camera-retro custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-cc 自定义"></i>
<i class="fa fa-caret-square-o-down custom"></i>
<i class="fa fa-caret-square-o-left custom"></i>
<i class="fa fa-caret-square-o-right custom"></i>
<i class="fa fa-caret-square-o-up custom"></i>
<i class="fa fa-cart-arrow-down custom"></i>
<i class="fa fa-cart-plus custom"></i>
<i class="fa fa-证书自定义"></i>
<i class="fa fa-child custom"></i>
<i class="fa fa-check custom"></i>
<i class="fa fa-check-circle custom"></i>
<i class="fa fa-check-circle-o custom"></i>
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-circle-thin custom"></i>
<i class="fa fa-clock-o custom"></i>
<i class="fa fa-clone custom"></i>
<i class="fa fa-close custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-cloud-download custom"></i>
<i class="fa fa-cloud-upload custom"></i>
<i class="fa fa-code custom"></i>
<i class="fa fa-code-fork 自定义"></i>
<i class="fa fa-咖啡定制"></i>
<i class="fa fa-cog 自定义"></i>
<i class="fa fa-cogs 自定义"></i>
<i class="fa fa-comment custom"></i>
<i class="fa fa-comment-o 自定义"></i>
<i class="fa fa-commenting custom"></i>
<i class="fa fa-commenting-o custom"></i>
<i class="fa fa-comments custom"></i>
<i class="fa fa-comments-o custom"></i>
<i class="fa fa-compass custom"></i>
<i class="fa fa-copyright custom"></i>
<i class="fa fa-creative-commons custom"></i>
<i class="fa fa-credit-card custom"></i>
<i class="fa fa-crop 自定义"></i>
<i class="fa fa-crosshairs 自定义"></i>
<i class="fa fa-cube 自定义"></i>
<i class="fa fa-cubes 自定义"></i>
<i class="fa fa-cutlery custom"></i>
<i class="fa fa-dashboard 自定义"></i>
<i class="fa fa-数据库自定义"></i>
<i class="fa fa-desktop custom"></i>
<i class="fa fa-diamond custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-download custom"></i>
<i class="fa fa-edit custom"></i>
<i class="fa fa-ellipsis-h 自定义"></i>
<i class="fa fa-ellipsis-v 自定义"></i>
<i class="fa fa-envelope custom"></i>
<i class="fa fa-envelope-o custom"></i>
<i class="fa fa-envelope-square custom"></i>
<i class="fa fa-橡皮擦自定义"></i>
<i class="fa fa-exchange custom"></i>
<i class="fa fa-感叹号自定义"></i>
<i class="fa fa-exclamation-circle custom"></i>
<i class="fa fa-exclamation-triangle custom"></i>
<i class="fa fa-external-link custom"></i>
<i class="fa fa-external-link-square custom"></i>
<i class="fa fa-eye custom"></i>
<i class="fa fa-eye-slash custom"></i>
<i class="fa fa-eyedropper 自定义"></i>
<i class="fa fa-fax 自定义"></i>
<i class="fa fa-feed custom"></i>
<i class="fa fa-女定制"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-file-archive-o custom"></i>
<i class="fa fa-file-audio-o 自定义"></i>
<i class="fa fa-file-code-o 自定义"></i>
<i class="fa fa-file-excel-o 自定义"></i>
<i class="fa fa-volume-down 自定义"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-pdf-o 自定义"></i>
<i class="fa fa-file-photo-o 自定义"></i>
<i class="fa fa-file-picture-o 自定义"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o 自定义"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o 自定义"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o 自定义"></i>
<i class="fa fa-film custom"></i>
<i class="fa fa-filter 自定义"></i>
<i class="fa fa-fire custom"></i>
<i class="fa fa-fire-Extremeer custom"></i>
<i class="fa fa-flag 自定义"></i>
<i class="fa fa-flag-checkered 自定义"></i>
<i class="fa fa-flag-o 自定义"></i>
<i class="fa fa-flash 自定义"></i>
<i class="fa fa-flask 自定义"></i>
<i class="fa fa-flask 自定义"></i>
<i class="fa fa-folder custom"></i>
<i class="fa fa-folder-o 自定义"></i>
<i class="fa fa-folder-open custom"></i>
<i class="fa fa-folder-open-o custom"></i>
<i class="fa fa-frown-o custom"></i>
<i class="fa fa-volume-off 自定义"></i>
<i class="fa fa-gamepad custom"></i>
<i class="fa fa-gavel custom"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-gears 自定义"></i>
<i class="fa fa-gift 自定义"></i>
<i class="fa fa-glass 定制"></i>
<i class="fa fa-globe custom"></i>
<i class="fa fa-graduation-cap custom"></i>
<i class="fa fa-group custom"></i>
<i class="fa fa-hand-grab-o custom"></i>
<i class="fa fa-hand-lizard-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hand-peace-o custom"></i>
<i class="fa fa-hand-pointer-o custom"></i>
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-scissors-o custom"></i>
<i class="fa fa-hand-spock-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hdd-o 自定义"></i>
<i class="fa fa-耳机定制"></i>
<i class="fa fa-heart 自定义"></i>
<i class="fa fa-heart-o custom"></i>
<i class="fa fa-heartbeat custom"></i>
<i class="fa fa-history custom"></i>
<i class="fa fa-home custom"></i>
<i class="fa fa-酒店定制"></i>
<i class="fa fa-hourglass custom"></i>
<i class="fa fa-hourglass-start custom"></i>
<i class="fa fa-hourglass-half custom"></i>
<i class="fa fa-hourglass-end custom"></i>
<i class="fa fa-i-cursor custom"></i>
<i class="fa fa-image custom"></i>
<i class="fa fa-inbox 自定义"></i>
<i class="fa fa-industry custom"></i>
<i class="fa fa-info custom"></i>
<i class="fa fa-info-circle 自定义"></i>
<i class="fa fa-institution custom"></i>
<i class="fa fa-key custom"></i>
<i class="fa fa-keyboard-o custom"></i>
<i class="fa fa-语言自定义"></i>
<i class="fa fa-laptop custom"></i>
<i class="fa fa-leaf custom"></i>
<i class="fa fa-legal custom"></i>
<i class="fa fa-lemon-o custom"></i>
<i class="fa fa-level-down custom"></i>
<i class="fa fa-level-up custom"></i>
<i class="fa fa-life-bouy custom"></i>
<i class="fa fa-life-ring custom"></i>
<i class="fa fa-life-saver custom"></i>
<i class="fa fa-lightbulb-o custom"></i>
<i class="fa fa-line-chart custom"></i>
<i class="fa fa-location-arrow custom"></i>
<i class="fa fa-lock custom"></i>
<i class="fa fa-magic custom"></i>
<i class="fa fa-magnet custom"></i>
<i class="fa fa-mail-forward custom"></i>
<i class="fa fa-mail-reply 自定义"></i>
<i class="fa fa-mail-reply-all custom"></i>
<i class="fa fa-male custom"></i>
<i class="fa fa-map custom"></i>
<i class="fa fa-map-marker custom"></i>
<i class="fa fa-map-o 自定义"></i>
<i class="fa fa-map-pin 自定义"></i>
<i class="fa fa-map-signs custom"></i>
<i class="fa fa-meh-o 自定义"></i>
<i class="fa fa-麦克风自定义"></i>
<i class="fa fa-microphone-slash custom"></i>
<i class="fa fa-minus custom"></i>
<i class="fa fa-minus-circle custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i>
<i class="fa fa-mobile custom"></i>
<i class="fa fa-money custom"></i>
<i class="fa fa-moon-o custom"></i>
<i class="fa fa-mortar-board custom"></i>
<i class="fa fa-摩托车定制"></i>
<i class="fa fa-mouse-pointer 自定义"></i>
<i class="fa fa-music custom"></i>
<i class="fa fa-users 自定义"></i>
<i class="fa fa-object-group custom"></i>
<i class="fa fa-object-ungroup custom"></i>
<i class="fa fa-paint-brush custom"></i>
<i class="fa fa-paper-plane custom"></i>
<i class="fa fa-paper-plane-o custom"></i>
<i class="fa fa-paw custom"></i>
<i class="fa fa-pencil custom"></i>
<i class="fa fa-pencil-square custom"></i>
<i class="fa fa-pencil-square-o custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-photo custom"></i>
<i class="fa fa-picture-o 自定义"></i>
<i class="fa fa-pie-chart 自定义"></i>
<i class="fa fa-plane custom"></i>
<i class="fa fa-volume-up custom"></i>
<i class="fa fa-plus custom"></i>
<i class="fa fa-plus-circle custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-plus-square-o custom"></i>
<i class="fa fa-power-off custom"></i>
<i class="fa fa-print custom"></i>
<i class="fa fa-puzzle-piece custom"></i>
<i class="fa fa-qrcode custom"></i>
<i class="fa fa-question custom"></i>
<i class="fa fa-question-circle custom"></i>
<i class="fa fa-quote-left custom"></i>
<i class="fa fa-quote-right custom"></i>
<i class="fa fa-random custom"></i>
<i class="fa fa-recycle custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-注册自定义"></i>
<i class="fa fa-删除自定义"></i>
<i class="fa fa-reorder custom"></i>
<i class="fa fa-reply custom"></i>
<i class="fa fa-reply-all custom"></i>
<i class="fa fa-retweet 自定义"></i>
<i class="fa fa-road custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-rss 自定义"></i>
<i class="fa fa-rss-square custom"></i>
<i class="fa fa-search custom"></i>
<i class="fa fa-search-minus custom"></i>
<i class="fa fa-search-plus custom"></i>
<i class="fa fa-发送自定义"></i>
<i class="fa fa-send-o 自定义"></i>
<i class="fa fa-server custom"></i>
<i class="fa fa-share custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-share-alt-o custom"></i>
<i class="fa fa-shield 自定义"></i>
<i class="fa fa-ship custom"></i>
<i class="fa fa-shopping-cart 自定义"></i>
<i class="fa fa-sign-in 自定义"></i>
<i class="fa fa-sign-out custom"></i>
<i class="fa fa-signal custom"></i>
<i class="fa fa-sitemap 自定义"></i>
<i class="fa fa-sliders 自定义"></i>
<i class="fa fa-smile-o custom"></i>
<i class="fa fa-警告自定义"></i>
<i class="fa fa-sort custom"></i>
<i class="fa fa-sort-alpha-asc 自定义"></i>
<i class="fa fa-sort-alpha-desc 自定义"></i>
<i class="fa fa-sort-asc 自定义"></i>
<i class="fa fa-sort-desc 自定义"></i>
<i class="fa fa-sort-down 自定义"></i>
<i class="fa fa-sort-numeric-asc 自定义"></i>
<i class="fa fa-sort-numeric-desc 自定义"></i>
<i class="fa fa-sort-up custom"></i>
<i class="fa fa-space-shuttle custom"></i>
<i class="fa fa-spinner 自定义"></i>
<i class="fa fa-spoon custom"></i>
<i class="fa fa-square custom"></i>
<i class="fa fa-square-o custom"></i>
<i class="fa fa-star custom"></i>
<i class="fa fa-star-half custom"></i>
<i class="fa fa-star-half-empty custom"></i>
<i class="fa fa-star-half-full custom"></i>
<i class="fa fa-star-half-o custom"></i>
<i class="fa fa-star-o custom"></i>
<i class="fa fa-sticky-note 自定义"></i>
<i class="fa fa-sticky-note-o 自定义"></i>
<i class="fa fa-street-view custom"></i>
<i class="fa fa-suitcase custom"></i>
<i class="fa fa-sun-o custom"></i>
<i class="fa fa-support custom"></i>
<i class="fa fa-tablet custom"></i>
<i class="fa fa-转速计自定义"></i>
<i class="fa fa-tag 自定义"></i>
<i class="fa fa-tags 自定义"></i>
<i class="fa fa-tasks 自定义"></i>
<i class="fa fa-taxi custom"></i>
<i class="fa fa-television custom"></i>
<i class="fa fa-terminal custom"></i>
<i class="fa fa-thumb-tack custom"></i>
<i class="fa fa-thumbs-down custom"></i>
<i class="fa fa-ticket custom"></i>
<i class="fa fa-times custom"></i>
<i class="fa fa-times-circle custom"></i>
<i class="fa fa-times-circle-o custom"></i>
<i class="fa fa-tint 自定义"></i>
<i class="fa fa-toggle-down custom"></i>
<i class="fa fa-toggle-left custom"></i>
<i class="fa fa-toggle-off custom"></i>
<i class="fa fa-toggle-on custom"></i>
<i class="fa fa-toggle-right custom"></i>
<i class="fa fa-toggle-up custom"></i>
<i class="fa fa-商标定制"></i>
<i class="fa fa-tras 自定义"></i>
<i class="fa fa-trash-o 自定义"></i>
<i class="fa fa-tree custom"></i>
<i class="fa fa-奖杯自定义"></i>
<i class="fa fa-truck custom"></i>
<i class="fa fa-wheelchair custom"></i>
<i class="fa fa-tv custom"></i>
<i class="fa fa-umbrella custom"></i>
<i class="fa fa-大学定制"></i>
<i class="fa fa-解锁自定义"></i>
<i class="fa fa-unlock-alt custom"></i>
<i class="fa fa-unsorted custom"></i>
<i class="fa fa-upload custom"></i>
<i class="fa fa-用户自定义"></i>
<i class="fa fa-user-plus custom"></i>
<i class="fa fa-user-secret 自定义"></i>
<i class="fa fa-user-times custom"></i>

字体真棒-手形图标

本章介绍 Font Awesome Hand 图标的用法。假设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 Hand 图标的用法和结果。将上述程序的 <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 Transportation 图标的用法和结果。将上述程序的 <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 自定义"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-摩托车定制"></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 Gender 图标的用法。假设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 Gender 图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="fa fa-无性别定制"></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-中风定制"></i>
<i class="fa fa-mars-中风-h 自定义"></i>
<i class="fa fa-mars-行程-v 自定义"></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 自定义"></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 自定义"></i>
<i class="fa fa-file-code-o 自定义"></i>
<i class="fa fa-file-excel-o 自定义"></i>
<i class="fa fa-file-image-o 自定义"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-o 自定义"></i>
<i class="fa fa-file-pdf-o 自定义"></i>
<i class="fa fa-file-photo-o 自定义"></i>
<i class="fa fa-file-picture-o 自定义"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-video-o 自定义"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o 自定义"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-text custom"></i>
<i class="fa fa-file-text-o 自定义"></i>

Font Awesome - 旋转图标

本章介绍 Font Awesome Spinner 图标的用法。假设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 Spinner 图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-cog 自定义"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-spinner 自定义"></i>

Font Awesome - 表单控件图标

本章解释了使用