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

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

more-bootstrap-icons

FamFamFam Silk Icon 是一套免費的圖標，它包含了 1000 多個精美的彩色的 icons（全部圖標一覽）。如果能用 Bootstrap 的方式來調用這些圖標，使用到我們的項目中，肯定能把需求全部滿足了。

一、下載 FamFamFam 圖標

下載：點擊下載

二、合併雪碧圖

並不是所有的 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 代碼了。

bootstrap-custom-icons

...
cus-world{ background-position: 0 0; width: 16px; height: 16px; } 
cus-world_add{ background-position: 0 -21px; width: 16px; height: 16px; } 
cus-world_delete{ background-position: 0 -42px; width: 16px; height: 16px; } 
cus-world_edit{ background-position: 0 -63px; width: 16px; height: 16px; } 
cus-world_go{ background-position: 0 -84px; width: 16px; height: 16px; } 
cus-world_link{ background-position: 0 -105px; width: 16px; height: 16px; } 
cus-wrench{ background-position: 0 -126px; width: 16px; height: 16px; } 
cus-wrench_orange{ background-position: 0 -147px; width: 16px; height: 16px; } 
...

保存上面的雪碧圖 famfamfam-icons.png，以及 cus-icons.css

三、與 Bootstrap 整合使用

默認情況下，在 bootstrap 中我們以 icon-xxx 的形式來使用圖標。現在，我們以 cus-xxx 來調用自定義的圖標。只需要在 cus-icons.css 里加上下面幾段：

/* icons */
[class^="cus-"],
[class*=" cus-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("icons/famfamfam-icons.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
  *margin-left: 0;
}
/* icons code below */
.cus-accept{ background-position: 0 0;  } 
.cus-add{ background-position: -21px 0;  } 
.cus-anchor{ background-position: -42px 0;  } 
.cus-application{ background-position: -63px 0;  } 
......
......
......

大功告成！

custom-icons-demo

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

———————- 正文結束，下面是思考人生時間。割割更健康 ———————-

總結

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

確實，如果完全採用 Bootstrap 的默認樣式，就會有很多界面元素雷同。但我們終究是要寫自己的 CSS 樣式的，不然，不論用什麼框架，總會有雷同的問題。Bootstrap 帶來的只是一套前端規範和開發約束，它定義了我們的合作方式，讓界面元素的命名有規律可循。更何況任何人都可以基於 Bootstrap 建立可擴展的前端工具包，或者在它的基礎上啟動屬於自己的框架。自定義圖標就是一個開始。

更多資源：
解決 Bootstrap 圖標在 Retina 屏幕下顯示模糊
Font Awesome 字體圖標