Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。官网：http://fontawesome.dashgame.com/
下面的代码是我自己整理的一些网页中常用的小图标，更多图标请访问官网查看详情。
font-awesome.min.css 百度网盘下载链接: https://pan.baidu.com/s/1g3J7dCmkgraqJCA1W6HouA 密码:27f4
<html>
<head>
<meta charset="UTF-8" />
<title>Font Awesome-用CSS实现各种小图标icon</title>
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.fa{
color: #4CA6FF;
font-size: 20px;
}
span{
padding: 20px;
}
</style>
</head>
<body>
<p>
<span>点赞</span>
<i class="fa fa-thumbs-o-up"></i>
<i class="fa fa-thumbs-up"></i>
<span>点踩</span>
<i class="fa fa-thumbs-o-down"></i>
<i class="fa fa-thumbs-down"></i>
<span>书签</span>
<i class="fa fa-bookmark-o"></i>
<i class="fa fa-bookmark"></i>
<span>收藏</span>
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart"></i>
</p>
<p>
<span>编辑</span>
<i class="fa fa-edit"></i>
<span>邮件</span>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-envelope"></i>
<span>文件夹</span>
<i class="fa fa-folder-o"></i>
<i class="fa fa-folder"></i>
<span>文件夹打开</span>
<i class="fa fa-folder-open-o"></i>
<i class="fa fa-folder-open"></i>
</p>
<p>
<span>回复</span>
<i class="fa fa-mail-reply"></i>
<i class="fa fa-mail-reply-all"></i>
<span>语音</span>
<i class="fa fa-microphone"></i>
<i class="fa fa-microphone-slash"></i>
<span>引用</span>
<i class="fa fa-quote-left"></i>
<i class="fa fa-quote-right"></i>
<span>五角星</span>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-half-empty"></i>
<i class="fa fa-star"></i>
</p>
<p>
<span>标签</span>
<i class="fa fa-tag"></i>
<i class="fa fa-tags"></i>
<span>详情</span>
<i class="fa fa-file-text-o"></i>
<i class="fa fa-file-text"></i>
<span>文件</span>
<i class="fa fa-file-o"></i>
<i class="fa fa-file"></i>
<span>分享</span>
<i class="fa fa-share-square-o"></i>
<i class="fa fa-share-square"></i>
</p>
<p>
<span>铅笔</span>
<i class="fa fa-pencil-square-o"></i>
<i class="fa fa-pencil-square"></i>
<span>上传和下载</span>
<i class="fa fa-cloud-upload"></i>
<i class="fa fa-cloud-download"></i>
</p>
</body>
</html>
