Font Awesome 【图标】

原创

Red_Ant_hoyl 2020-06-01 10:21:20 博主文章分类：html技术 ©著作权

文章标签 无限缩放图标 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者Red_Ant_hoyl的原创作品，如需转载，请与作者联系，否则将追究法律责任

前言

本笔记非常简短！

简介

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

参考

《Font Awesome一套绝佳的图标字体库和CSS框架》

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<title>Font-Awesome图标</title>
	</head>
	<body>
		<i class="fa fa-car"></i>
		<i class="fa fa-car" style="font-size:48px;"></i>
		<i class="fa fa-car" style="font-size:60px;color:red;"></i>
		<i class="fa fa-car fa-lg"></i>
		<i class="fa fa-car fa-2x"></i>
		<i class="fa fa-car fa-3x"></i>
		<i class="fa fa-car fa-4x"></i>
		<i class="fa fa-car fa-5x"></i>
		<ul class="fa-ul">
			<li><i class="fa-li fa fa-check-square"></i>List icons</li>
			<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
			<li><i class="fa-li fa fa-square"></i>List icons</li>
		</ul>
		<i class="fa fa-spinner fa-spin"></i>
		<i class="fa fa-circle-o-notch fa-spin"></i>
		<i class="fa fa-refresh fa-spin"></i>
		<i class="fa fa-cog fa-spin"></i>
		<i class="fa fa-spinner fa-pulse"></i>
	</body>
</html>