DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 強大的矢量字體圖標Font-Awesome
強大的矢量字體圖標Font-Awesome
編輯:WEB前端代碼     
Font-Awesome,這個項目主要是css3的一個應用,准確的說是一段css,這裡的把很多圖標的東西做到了font文件裡面,然後通過引用外部font文件的方式,來展現圖標。

可以先看看Font-Awesome的一個應用實例:http:///a/bjac/cu727al8.htm

Font Awesome 是一套專門為 Twitter Boostrap 設計的圖標字體庫。這套圖標字體集幾乎囊括了網頁中可能用到的所有圖標,除了包括 Twitter Boostrap 的默認圖標外,還有社交網絡圖標、Web 應用程序圖標和編輯器圖標等等,可以免費用於商業項目。

主要特色:

✓ 一種字體,249個圖標,是網頁操作的象形語言;
✓ 純 CSS 控制,能夠輕松定義圖標的顏色、大小、陰影以及任何 CSS 能夠實現的效果
✓ 無限縮放,矢量圖標在任何尺寸下都一模一樣;
✓ 免費使用,包括商業和非商業項目;
✓ 支持 Internet Explorer 7 浏覽器;
✓ 能夠在 Retina 屏幕完美呈現;
✓ 完全兼容 Twitter Boostrap 最新版本;
✓ 對設計師友好,設計師能夠輕松使用;
✓ 和其它圖標字體不同,兼容屏幕閱讀器;


使用方法

  使用 CSS:
拷貝 Font Awesome 字體目錄到項目中;
拷貝 font-awesome.min.css 文件到項目中;
修改 font-awesome.min.css 文件中的字體路徑到正確的位置;
在頁面的 head 裡引入 font-awesome.min.css 文件:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">


  使用 LESS:
拷貝 Font Awesome 字體目錄到你的項目中;
拷貝 font-awesome.less 文件到 bootstrap/less 目錄。
打開 bootstrap.less 文件並替換 @import "sprites.less"; 為 @import "font-awesome.less";
編輯 elusive-webfont.less 文件的 @FontAwesomePath 變量為字體路徑:

@FontAwesomePath: "../font";
  然後重新進行 LESS 編譯就可以了。


官網:http://fortawesome.github.io/Font-Awesome/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved