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 图标的使用及其相应的输出。

打印页面