字体真棒图标 


字体真棒图标


字体超赞图标库提供519个免费可缩放矢量图标。该库完全免费,可用于个人和商业用途。这些图标最初是为Bootstrap设计的,可以轻松自定义。

加载字体库

要加载Font Awesome库,请将以下行复制并粘贴到网页的<head>部分中。

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

使用图标

Font Awesome提供了几个图标。选择其中之一,然后将图标类的名称添加到<body>标记内的任何HTML元素。在以下示例中,我们使用了印度货币的图标。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   
    
   
      <i class="fa fa-inr"></i>
   
    

它将产生以下输出-

定义大小

您可以通过使用CSS定义图标的大小并将其与类名一起使用来增加或减小图标的大小,如下所示。在给定的示例中,我们将大小声明为6 em。

<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>
        
   
    
   
      <i class="fa fa-inr mysize"></i>
   
    

它将产生以下输出-

定义颜色

就像大小一样,您可以使用CSS定义图标的颜色。以下示例显示了如何更改印度货币图标的颜色。

<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>
        
   
    
   
      <i class="fa fa-inr custom"></i>
   
    

分类列表

Font Awesome提供了519个以下类别的图标-

  • Web应用程序图标
  • 手形图标
  • 交通图标
  • 性别图标
  • 文件类型图标
  • 微调图标
  • 表单控制图标
  • 付款图标
  • 图表图标
  • 货币图标
  • 文字编辑器图标
  • 定向图标
  • Video Player图标
  • 品牌图标

要使用这些图标中的任何一个,必须用所需图标的类名替换本章给出的程序中的类名。在本单元的下一章(字体真棒)中,我们按类别说明了各种“字体真棒”图标的用法和各自的输出。

0



error: 内容受到保护 !!