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>