Font Awesome 4.0.3 提供了369個網頁常用的矢量字體圖標,新浪、人人 的矢量圖標也到其中喲


要求

    • 必備知識

      本文要求基本了解html與css前端代碼。

    • 運行環境

      普通瀏覽器,兼容IE7

    • 源碼下載

      下載地址

 

Font Awesome 為您提供了一套可縮放的字體矢量圖標,可以快速自定義圖標的大小,顏色,陰影,這些都可以通過CSS來實現,無需任何的JS代碼哦。

2014-03-29_022343

一,主要特點如下:

1,一個字體,369個圖標

2,無需要使用JavaScript

3,通過CSS自定義圖標的大小,顏色,陰影

4,用戶界面友好

5,支持 Internet Explorer 7 瀏覽器

6,能夠在 Retina 屏幕完美呈現

7,和其它圖標字體不同,兼容屏幕閱讀器

8,可擴展性強

9,文檔完善

10,免費

 

二,圖標類型下面簡單羅列一下吧,這里只列出了部分,完整圖標列表請查看這里

1,Web應用程序常用圖標:

2014-03-29_023542

2,表單控件圖標

2014-03-29_023653

3,貨幣圖標

2014-03-29_023653

4,文本編輯器的圖標

2014-03-29_023653

5,網頁定向圖標

2014-03-29_023653

6,播放器圖標

2014-03-29_023653

7,品牌圖標

2014-03-29_132250

三,使用方法

方式一:

此方法使用最為簡單,BootstrapCDN 方式

在自己網頁的head標簽中引入如下代碼即可,不需要下載和安裝任何東西即可使用:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

 

方式二:

此方式需要下載 Font Awesome項目文件夾

將Font Awesome 目錄 拷貝到你的項目中,然后在head標簽中引入如下代碼:

<link rel="stylesheet" href=" your project(你的項目路徑)/font-awesome/css/font-awesome.min.css">

 

具體如何在網頁中添加這些矢量圖標請查看如下地址:

http://fortawesome.github.io/Font-Awesome/examples/

完整圖標列表請查看這里

 

如以上文章或鏈接對你有幫助的話,別忘了在文章結尾處輕輕點擊一下 “還不錯”按鈕或到頁面右下角點擊 “贊一個” 按鈕哦。你也可以點擊頁面右邊“分享”懸浮按鈕哦,讓更多的人閱讀這篇文章。

 

作者: Li-Cheng
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM