字體圖標
1.什么是字體圖標
一般我們?nèi)绻O置一個span或者是i的背景的時候都會用圖片.但是今天我們學習一種更方便更好用的一個東西,就叫做:字體圖片.
那么為什么要使用字體圖標這個東西呢?這個才是我們最關(guān)心的東西.她有什么優(yōu)點值的我們?nèi)W習?見下面的分析:
為什么我要使用font-awesome
Font Awesome是一款很流行的字體圖標工具袁铐。隨著Bootstrap的流行而逐漸被人所認識精算，現(xiàn)在FontAwesome不僅僅可以在bt上使用，還可以應用在各種web前端開發(fā)中蔚晨。
優(yōu)點:
相對于傳統(tǒng)的使用背景圖片作為圖標逃片，字體圖標主要是
- 支持自適應
- 可以使用字體的各種特性（比如變色祟昭、變大變小、字體陰影等）
- 減少數(shù)據(jù)加載,可以提高頁面的加載速度.
- 樣式更容易定義等
2.關(guān)于字體圖標的特性認識
由于字體圖標使用的是svg來做的,所以是矢量圖.在任何分辨率下面都不會失真.即使是蘋果的視網(wǎng)膜屏幕,效果依然完美,贊一個.
下面是字體圖標的特性列表:
- 一個字體文件,369 個圖標,現(xiàn)在更多.
- 不需要javascript要求：更快的載入速度.
- 無限的可擴展性：可伸縮矢量圖形意味著每一個圖標在任何大小看起來真棒.SVG技術(shù).
- 自由免費：你可以將它應用到你的商業(yè)中读串。
- CSS控制：輕松的定義圖標的顏色已旧，大小秸苗，陰影，和任何與CSS相關(guān)的特性运褪。
- 完美的視網(wǎng)膜顯示：使用矢量字體惊楼，這意味著他們可以完美的顯示在高分辨率顯示器中
- 為BootStrap而生：完全的兼容BootStrap新版3.0
- 桌面友好：你可以查看字體的樣式列表- 兼容屏幕閱讀器：不像其他字體圖標不兼容屏幕閱讀器
3.如何應用
上面已經(jīng)介紹了很多關(guān)于字體圖標的知識了,那么如何在項目中進行應用呢?很簡單,看下面的鏈接
Font-awesome
點擊上面的鏈接即可訪問font-awesome 官網(wǎng),獲取更多幫助!
1.只需要去官網(wǎng)下載包,然后放到你的項目中就可以了.點我下載,然后在你的html頭部的head里面添加對相應的font-awesome的樣式.
//導入對應的CSS文件
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2.按照這里的案例開始你的項目點我開始學習如何使用到你的項目中
3.如需兼容IE瀏覽器，可以使用Font-awesome的3.2.1版本秸讹。下載font-awesome-ie7.css或者是font-awesome-ie7.min.css檀咙。然后在項目中引入該樣式文件。
<!--[if IE 7]><link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"><![endif]-->
結(jié)束語
關(guān)于字體圖片今天我們就學到這里,這篇博文權(quán)當拋磚引玉.還需要多多練習...say you soon...
