Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。官网：
下面的代码是我自己整理的一些网页中常用的小图标，更多图标请访问官网查看详情。
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>