Web Icon(图标) - 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 定义图标的大小并将其与类名称一起使用来增加或减小图标的大小，如下所示。在给定的示例中，我们将大小声明为 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 图标的用法和各自的输出。