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 字體圖標