使用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>
最终效果如下所示：
更多教程请看这里。
