Web图标教程

Font Awesome 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>

Defining the Color

就像大小一样，您可以使用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>