1. 引言 
   網(wǎng)頁小圖標(biāo)到處可見，如果一個網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會顯得非常簡陋。下面的小圖標(biāo)，你是不是會經(jīng)常用到？

你可能說——“我們用的都是彩色的，不是黑白的”——別著急，下面會講到。因?yàn)樗鼈円部梢宰優(yōu)椴噬摹?/p>

黑白的也好，彩色的也罷，如果用傳統(tǒng)的“css + 圖片”的方式來制作這些icon，我估計(jì)你至少得雇傭一個專業(yè)的設(shè)計(jì)師吧。一般的程序猿，包括前端程序猿，估計(jì)只能去搜索了，不會自己拿ps畫。例如，我之前經(jīng)常去一個叫做“懶人圖庫”的網(wǎng)站去找資源，現(xiàn)在那個網(wǎng)站還存在。 

但是問題又來了，如果你搜索來的是黑白的，現(xiàn)在也用黑白的，后期網(wǎng)站變化主題怎么辦？你搜出來的是16 * 16的，要有個頁面需要 32 * 32的怎么辦？如果沿著這個方向考慮，你會發(fā)現(xiàn)，自己將在這上面耗費(fèi)大量資源和精力。

但是如果我告訴你，有一個東西，它已經(jīng)為你準(zhǔn)備了將近500個常用icon圖標(biāo)（還在不斷更新），能大能小，能隨便修改顏色，完全開源，完全免費(fèi)，你會不會心動？如果你非常著急，先去百度一下“font-awesome”，再來繼續(xù)讀文章不遲。

1. 應(yīng)用font-awesome 
   font-awesome當(dāng)前的版本是4.2.0，咱們就直接用這個版本的來說。

2.1 下載

去http://www.thinkcmf.com/下載，解壓之后，應(yīng)該能看到“css”和“font”兩個文件夾。css文件夾中存放著css文檔，font文件夾中存放在著適用于不同瀏覽器的字體文件。其中，css文件夾中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 兩個文檔，其他的可以刪掉。結(jié)構(gòu)應(yīng)該如下：

2.2 簡單應(yīng)用

將整理好的文件夾加入到你的網(wǎng)站，新建一個測試頁面 demo.html，將css文件夾中的兩個css文件，引入到頁面。

<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE]>
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->

• 1
• 2
• 3
• 4

如上圖，如果是IE瀏覽器，需要引入 font-awesome-ie7.min.css ，因?yàn)閒ontAwesome支持IE7+瀏覽器的。（唉。。為何不再往前延伸到支持IE6呢。。。）

引用CSS文件之后，接下來就可以使用圖標(biāo)了。例如，我要在頁面中顯示一個“鏈接”的圖標(biāo)，我可以這么寫：

<span><i class="fa fa-link"></i> 鏈接</span>

• 1

此時頁面將顯示：

顯示是顯示出來了，那么對應(yīng)鏈接的這個css類“fa-link”我是從哪里找來的呢？

答案非常簡單！進(jìn)入官網(wǎng)的icon頁面，里面有所有的icon的css類，就可以找到你想要的那個圖標(biāo)的css類了。 

（注意，在“fa-link”前面還要加入一個“fa”類，例如 ）

2.3 設(shè)置大小和顏色

學(xué)會了以上的簡單使用，設(shè)置顏色和大小非常簡單，只要你會用css設(shè)置文字的顏色和大小就行。直接看代碼：

復(fù)制代碼

<span style="font-size:12px;"><i class="fa fa-link"></i> 鏈接</span>
<br />
<span style="font-size:20px;"><i class="fa fa-link"></i> 鏈接</span>
<br />
<span style="color:red"><i class="fa fa-link"></i> 鏈接</span>
<br />
<span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 鏈接</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

復(fù)制代碼  得出的結(jié)果就是：

so easy 吧！這樣看來它確實(shí)是個好東西。

最后總結(jié)，看起來阿里巴巴圖庫比較試合國人