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