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

要求

• 必備知識

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

• 運行環境

  普通瀏覽器,兼容IE7

• 源碼下載

  下載地址

 

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

一,主要特色以下:

1，一個字體，369個圖標

2，無須要使用JavaScript

3，經過CSS自定義圖標的大小，顏色，陰影

4，用戶界面友好

5，支持 Internet Explorer 7 瀏覽器

6，可以在 Retina 屏幕完美呈現

7，和其它圖標字體不一樣，兼容屏幕閱讀器

8，可擴展性強

9，文檔完善

10，免費

 

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

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

2,表單控件圖標

3,貨幣圖標

4，文本編輯器的圖標

5，網頁定向圖標

6，播放器圖標

7，品牌圖標

三，使用方法

方式一:

此方法使用最爲簡單，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

出處: http://www.cnblogs.com/Li-Cheng/p/3632059.html

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。