使用fontawesome图标

　我每次找图标时都是在阿里的开源图标库中找的，但是使用起来不是很方便。而我发现了fontawesome之后，觉得实在不错，所以分享给大家。

　这是一些参考的文档。

第一部分：基本介绍

　下面是他的介绍，我们可以看到它可以兼容到IE7及以上。

　　它的主要特点如下：

即它的特点是使用css控制，并且满足各种需要。

第二部分：使用fontawesome

下载

　　首先，去官网下载。下载之后得到一个压缩包，解压缩后可以看到css文件夹和font文件夹。如下所示：

　　其中fonts中存放的是适用于不通浏览器的字体文件。 css中包含的就是我们需要的fontawesome文件。显然*min.css就是压缩后的文件。那么ie7标识的文件是什么呢？ --- 显然是用于兼容ie7及以上的。。。

基本应用

如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>fontawesome</title>

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

  <!--[if IE]>

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

  <![endif]-->

</head>

<body>

  <span><i class="fa fa-link"></i>链接</span>

</body>

</html>

这就是一个最基本的使用了，效果如下所示：

注意：这里我们使用了fa fa-link实现了链接图形，实际上是参考自官方网站的。

这里有下面几点值得注意：

虽然在页面中只引入了css文件，但这并不代表我们可以把fonts文件删掉，因为在使用fontawesome时，会自动调用fonts中的文件，尽管我们没有引入，非常重要。
font-awesome-ie7.min.css的作用在于当页面渲染在了IE浏览器上时，这个文件可以兼容IE7及以上的浏览器，这觉得是足够了。
我们通常使用span加i的形式来使用fontawesome。
i标签是表示斜体的，所有浏览器都支持，并且也存在于HTML5的标准中，所以可以放心使用。
在fa-link前一定是要添加fa的，他们是配合使用的。

颜色、字体大小的应用

如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>fontawesome</title>

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

  <!--[if IE]>

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

  <![endif]-->

</head>

<body>

  <span ><i style="color:red" class="fa fa-link"></i>链接</span>

  <br>

  <br>

  <span style="color:red"  ><i class="fa fa-link"></i>链接</span>

  <br>

  <br>

  <span style="color: blue; font-size: 25px;"  ><i class="fa fa-link"></i>链接</span>

  <br>

  <br>

  <span><i style="color: blue; font-size: 25px;"    class="fa fa-link"></i>链接</span>

</body>

</html>

最终效果如下：

旋转图标　　

　　fa-spin 和 fa-spinner, fa-refresh, fa-cog组合

　　缺点：只支持IE10+

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>fontawesome</title>

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

  <!--[if IE]>

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

  <![endif]-->

</head>

<body>

  <span ><i class="fa fa-spin fa-spinner"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-spin fa-refresh"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-spin fa-cog"></i> 旋转 </span>

  <br>

</body>

</html>

效果如下所示：

翻转图标

即使用fa-rotate-90就可以使图标翻转90度。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>fontawesome</title>

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

  <!--[if IE]>

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

  <![endif]-->

</head>

<body>

  <span ><i class="fa fa-tree"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-tree fa-rotate-90"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-tree fa-rotate-180"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-tree fa-rotate-270"></i> 旋转 </span>

  <br>

  <span ><i class="fa fa-tree fa-rotate-360"></i> 旋转 </span>

  <br>

</body>

</html>

最终效果如下所示：

更多教程请看这里。