原理:是将icon做成了字型、然後封裝起來、對于我們而言 操控字型比操控圖檔 我們容易很多。
下載下傳最新版本的檔案、解壓之後、将“css”和"fonts"兩個檔案夾複制到目前工作目錄跟目錄下。注意:一定要将fonts放入、并且與
css同級!
結構如圖即可!
準備工作做好之後
接下來就可以動手感受一下font awesome的魅力了!建立一個空頁面。随便寫一個标簽、
<i class="fa fa-link"></i>
備注:fa為統一的樣式、必須填寫、 後面的為對應的圖示的類、這樣出來的效果就是你想要的。這個連結樣式是封裝好的、你如果想改變、隻需要在自己的樣式表裡面複寫其樣式即可、eg: fa-link{ color:#000000; font-size:16px }
這樣、圖示就會變黑變大! 是不是很自由呢?
隻需要在輸入框輸入你想要尋找的圖示、大部分都會出來的、
當然、現在這個庫還不是很完善、但是在不斷地壯大。如今已經由最初的幾十個圖示增長到五百多個了。
大家可以來看官方的宣傳語
接下來大家又想了、這個東西這麼美、那相容性呢?
實話實說、font awesome一直以來對ie的支援都不是很理想、之前font awesome官方出過對font awesome 3.2.1的ie7相容性解決方案,但其最新版本4.2.0至今未有任何動作。 thinkcmf秉承開放至精神,集己所力推出font awesome 4.2.0相容性解決方案,目前已完美相容至ie7。
相容性解決方案:
在 <code><head></code> 标簽
裡, 引入 font-awesome.min.css.
<linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css">
<linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome-ie7.min.css">