要求
-
必備知識
本文要求基本了解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
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。