1、CSS框架简介
Font Awesome是一套绝佳的图标字体库和CSS框架,为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。仅一个Font Awesome字库,就几乎包含了与网页相关的形象图标。Font Awesome完全不依赖JavaScript,因此无需担心兼容性。
框架创始人:戴夫·甘迪(Dave Gandy)
2、使用方法
(1)下载CSS框架
从上述网站中下载CSS框架,并添加到项目中。
(2)样式引用
在HTML页面中引用样式。如下:
<!--FontAwesome图标字体样式库-->
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
(3)添加图标
在页面中使用字体图标。如下:
<i class="fa fa-shopping-cart"></i> 我的购物车
【示例】使用FontAwesome图标字体库生成网页所需的相关图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FontAwesome图标字体库</title>
<meta name="author" content="pan_junbiao的博客">
<!--FontAwesome图标字体样式库-->
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
table { border-collapse: collapse;}
table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}
</style>
</head>
<body>
<table align="center">
<tr>
<th>CSS框架:</th>
<td>FontAwesome图标字体库</td>
</tr>
<tr>
<th>框架创始人:</th>
<td>戴夫·甘迪(Dave Gandy)</td>
</tr>
<tr>
<th>字体图标:</th>
<td>
<i class="fa fa-shopping-cart"></i> fa-shopping-cart<br/>
<i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up<br/>
<i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down<br/>
<i class="fa fa-bell-o"></i> fa-bell-o<br/>
<i class="fa fa-commenting-o"></i> fa-commenting-o<br/>
<i class="fa fa-folder-open"></i> fa-folder-open<br/>
<i class="fa fa-gamepad"></i> fa-gamepad<br/>
<i class="fa fa-id-card-o"></i> fa-id-card-o<br/>
</td>
</tr>
<tr>
<th>博客信息:</th>
<td>您好,欢迎访问 pan_junbiao的博客</td>
</tr>
<tr>
<th>博客地址:</th>
<td>https://blog.csdn.net/pan_junbiao</td>
</tr>
</table>
</body>
</html>
执行结果: