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>
