爲bootstrap添加更多自定義圖標

From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731

Twitter Bootstrap 真是前端開發的瑞士軍刀，做爲基於 HTML，CSS 和JavaScript 的簡潔靈活的前端框架及交互模塊集合，讓我這樣的半吊子 PHPer 都能很輕鬆地寫出一張還算漂亮的頁面來。乾淨整潔有木有！小清新有木有！Web 後端都逆襲了有木有！

Bootstrap 默認自帶了由 Glyphicons 提供的 140 個灰/白圖標，很好看，然而，很不夠用啊！沒法知足項目飢渴的需求啊！連個電話的圖標都沒有，哥曾經在推上@這套圖標的做者，過了大概 5 個月這哥們 回覆我 說那個 phone icon 作好了。。。

FamFamFam Silk Icon 是一套免費的圖標，它包含了 1000 多個精美的彩色的 icons（所有圖標一覽）。若是能用 Bootstrap 的方式來調用這些圖標，使用到咱們的項目中，確定能把需求所有知足了。

1、下載 FamFamFam 圖標

下載：點擊下載

2、合併雪碧圖

並非全部的 1000 多枚圖標咱們都用得上，爲了減少圖片大小，咱們從下載的圖標中挑出咱們須要的，而後進行 Sprite 在線合併。

1. 打開這個網站：http://spritegen.website-performance.org/
2. 選擇你要合併的圖標準備上傳
3. 修改如下配置

• Build Direction: Horizontal
• Horizontal Offset: 5px
• Vertical Offset: 5px
• CSS Prefix: cus-

4. 提交上傳

大約 30 秒後，咱們就能獲得合併後的雪碧圖，以及相關 CSS 代碼了。

...
cus-world<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_add<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-21px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_delete<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-42px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_edit<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-63px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_go<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-84px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-world_link<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-105px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-wrench<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-126px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
cus-wrench_orange<span style="margin:0px; padding:0px; color:rgb(0,170,0)">{</span> <span style="margin:0px; padding:0px; font-weight:bold">background-position</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(204,102,204)">0</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">-147px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">width</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; font-weight:bold">height</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">:</span> <span style="margin:0px; padding:0px; color:rgb(153,51,51)">16px</span><span style="margin:0px; padding:0px; color:rgb(0,170,0)">;</span> <span style="margin:0px; padding:0px; color:rgb(0,170,0)">}</span> 
...

　　

大功告成！

想看實際效果？查看 Demo 頁。

總結

Bootstrap 是一套前端開發利器，它能夠幫助咱們加速項目開發，讓樣式和交互擁有一致的設計和實現方法。因而開發者不須要在外觀上花費過多時間，能將精力集中於更重要的功能。Sroan 曾經問我：「你們都用這套框架，那作出來網站豈不是都長得同樣了？」

確實，若是徹底採用 Bootstrap 的默認樣式，就會有不少界面元素雷同。但咱們終究是要寫本身的 CSS 樣式的，否則，不論用什麼框架，總會有雷同的問題。Bootstrap 帶來的只是一套前端規範和開發約束，它定義了咱們的合做方式，讓界面元素的命名有規律可循。更況且任何人均可以基於 Bootstrap 創建可擴展的前端工具包，或者在它的基礎上啓動屬於本身的框架。自定義圖標就是一個開始。