天天看點

Font Awesome:精心打造的 Twitter Boostrap 矢量字型圖示

Font Awesome:精心打造的 Twitter Boostrap 矢量字型圖示

  主要特色:

 一種字型,249個圖示,是網頁操作的象形語言;

 無限縮放,矢量圖示在任何尺寸下都一模一樣;

 免費使用,包括商業和非商業項目;

 支援 Internet Explorer 7 浏覽器;

 能夠在 Retina 螢幕完美呈現;

 對設計師友好,設計師能夠輕松使用;

 和其它圖示字型不同,相容螢幕閱讀器;

拷貝 Font Awesome 字型目錄到項目中;

拷貝 font-awesome.min.css 檔案到項目中;

修改 font-awesome.min.css 檔案中的字型路徑到正确的位置;

在頁面的 head 裡引入 font-awesome.min.css 檔案:

拷貝 Font Awesome 字型目錄到你的項目中;

拷貝 font-awesome.less 檔案到 bootstrap/less 目錄。

打開 bootstrap.less 檔案并替換 @import "sprites.less"; 為 @import "font-awesome.less";

編輯 elusive-webfont.less 檔案的 @FontAwesomePath 變量為字型路徑:

  然後重新進行 LESS 編譯就可以了。

  如何 GitHub 無法通路,可能需要配置 hosts 才能通路:

<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">讓人愛不釋手的13套精美網頁圖示素材</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/09/30/25-fresh-free-icons-sets.html" target="_blank">分享25套非常漂亮的免費網頁圖示素材</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/06/27/50-fresh-icon-sets-for-developers-and-designers.html" target="_blank">網頁素材大寶庫:50套精美的圖示素材</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/05/15/2020206.html" target="_blank">分享20個非常不錯的 UI 圖示素材資源</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/05/02/apple-and-mac-inspired-free-icon-sets.html" target="_blank">分享18套精美的蘋果風格免費圖示素材</a>

歡迎任何形式的轉載,但請務必注明出處。