今天html5模版網(m.52vt.cn)跟大家分享一個非常棒的而且免費的圖標字體資源站-fontawesome.io

目前來說，fontawesome圖標字體庫主要使用在Bootstrap框架里面。可以說是一個非常完美的組合。也同時省去了webAPP前端工程師去設計和尋找圖標的時間。提高我們的工作效率。之前html5模版網(m.52vt.cn)也介紹過一些圖標字體資源站。在線生成自定義APP圖標字體利器：IconVault? ? ??Fontello圖標字體的發電機，根據字體大小生成相應圖標；5個免費設計英文字體酷站推薦|最火的英文字體下載。

FontAwesome：免費圖標字體素材網是一套完美的圖標字體，主要目的是和 Bootstrap 搭配使用，由戴夫·甘迪設計發布的，該網站的所有素材都可以縮放、定制，跳轉大小、顏色、陰影，以及任何可以與CSS搭配來完成。

免費bootstrap圖標字體資源站網址：http://fontawesome.io/

具體的使用方法如下：

1.到官網高低載最新版本的Font Awesome.

2.解壓文件，將此中的css和fonts文件夾拷貝到項目中，此中css文件夾中有兩個css文件（font-awesome.css和font-awesome.min.css），fonts下有有5個


3.在須要應用的html或者其它類型的頁面中引入樣式文件，如下：
<link href="css/font-awesome.css" rel="stylesheet" />

4.查看font-awesome.css文件，若是引用的是緊縮版的，就要查看那個文件了，打開文件看到第一個樣式定義如下：

＠font-face {
 
font-family: ""FontAwesome"";
 
src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;
 
src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;
 
font-weight: normal;
 
font-style: normal;

}
必然重視此中的src:url（）中的路徑是不是當前與當前項目標實際路徑向匹配。

4.最后在頁面中參加響應的html元素，并且遵守font awesome定義好的樣式為須要添加矢量圖標的元素指定樣式。：
<div>
       <a href="＃"><i></i>  Home</a>
       <a href="＃"><i></i>  Library</a>
       <a href="＃"><i></i>  Applications</a>
       <a href="＃"><i></i>  Settings</a>
   </div>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
別的，font awesome 和BootStrap組合運用可以達到更好的結果。