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 建立可擴充套件的前端工具包，或者在它的基礎上啟動屬於自己的框架。自定義圖示就是一個開始。