如何在网页内插入精美的FontAwesome字体小图标

Svlik 2017-11-15 教程, 文章汇总 4,115 0

文章目录[隐藏]

基本介绍
运用FontAwesome
颜色字体大小
旋转图标
翻转图标

基本介绍

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

它的主要特点如下：

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

运用FontAwesome

点击这里进行下载。下载之后得到一个压缩包，解压缩后能够看到css文件夹和font文件夹。如下所示：

其间fonts中存放的是适用于不通浏览器的字体文件。 css中包含的就是我们需求的FontAwesome文件。

<!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实现了链接图形，实际上是参考自https://www.svlik.com/t/FontAwesome/或官方网站。
这里有下面几点值得注意：

虽然在页面中只引入了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>
<span style="color:red" ><i class="fa fa-link"></i>链接</span>
<span style="color: blue; font-size: 25px;" ><i class="fa fa-link"></i>链接</span>
<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>

最终效果如下所示：
旋转
旋转
旋转
旋转
旋转

声明：本文为原创，作者为 Svlik，转载时请保留本声明及附带文章链接：https://www.svlik.com/369.html