今天html5模版網(wǎng)(m.suosuyi.cn)跟大家分享一個(gè)非常棒的而且免費(fèi)的圖標(biāo)字體資源站-fontawesome.io

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

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

免費(fèi)bootstrap圖標(biāo)字體資源站網(wǎng)址：http://fontawesome.io/

具體的使用方法如下：

1.到官網(wǎng)高低載最新版本的Font Awesome.

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


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

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

＠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（）中的路徑是不是當(dāng)前與當(dāng)前項(xiàng)目標(biāo)實(shí)際路徑向匹配。

4.最后在頁面中參加響應(yīng)的html元素，并且遵守font awesome定義好的樣式為須要添加矢量圖標(biāo)的元素指定樣式。：
<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組合運(yùn)用可以達(dá)到更好的結(jié)果。