fontawesome图标字体库

  fontawesome图标字体库通过css类可以让你使用众多的图表,堪称一个图标字体的css框架了。Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。具体的有如下特点:

    1.图标众多,现在的Font Awesome最新版本为4.7.0,包含了670多个图标,能满足日常使用了。

     2.不依赖JavaScript

   3.可缩放而不损失质量,因为这个图标库是矢量图标库

    4.这些图标字体支持任何可用的css设置,你可以设置图表的font-size,color,shadow等

    5.关键是免费

   具体可参考其中文网站:http://fontawesome.dashgame.com/

 截图如下:fontawesome图标字体库

使用方法:

    1.在官网上下载之后是个压缩包,也可云盘下载,font-awesome-4.7.0.zip:https://pan.baidu.com/s/1Dv9E7aplMYc68FS-mhEpBQ

    2.解压之后即可使用,简单的例子:

    fontawesome图标字体库

代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>font-awesome</title>

        <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

        <style>

            .fa-address-book{

                font-size:26px;

            }

            .fa-car{

                color:red;

            }

        </style>

    </head>

    <body>

         <i class="fa fa-camera-retro fa-fw"></i> 相机<br/>

          <i class="fa fa-address-book fa-fw"></i> 地址簿<br/>

           <i class="fa fa-car fa-fw"></i> 汽车<br/>

            <i class="fa fa-envelope fa-fw"></i> 邮件<br/>

             <i class="fa fa-id-card fa-fw"></i> 身份证<br/>

    </body>

</html>

 说明:

         font-awesome的图表都是以fa类 加上fa-图标名来展现,图标名可以在官网的首页中找到,首页中列出了所有的可用图标,如下红框框住的就是图标名字:

fontawesome图标字体库   

        fa-fw:不是必须的,它的作用是使所有的图表保持同样的宽度,避免图标宽窄的问题,即fixed width的缩写(固定宽度),在列表的时候经常使用:

fontawesome图标字体库

    style中我重写了图表的font-size和color,目的就是为了告诉大家,font-awesome支持任何的css设置。