字体真棒图标

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 图标的用法和各自的输出。