UI圖標不用愁:矢量字體圖標Font-Awesome

Font-Awesome,這個項目主要是css3的一個應用,準確的說是一段css,這裏的把不少圖標的東西作到了font文件裏面,而後經過引用外部font文件的方式,來展示圖標。css

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

主要特點:bootstrap

✓ 一種字體,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">

網絡

QQ交流:187395037

如下是適量字體實例效果編輯器

 

 

以上的矢量字體包和CSS實例能夠從個人CSDN地址下載字體

下載地址:http://download.csdn.net/detail/venus150/7141267spa

相關文章
相關標籤/搜索