天天看點

前端設計必備-Font awesome 插件使用菜鳥言語 font awesome 是一個封裝好的“插件”、你在使用的時候 直接調用對應的類即可。

原理:是将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>&lt;head&gt;</code> 标簽

裡, 引入 font-awesome.min.css. 

&lt;linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css"&gt;

&lt;linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome-ie7.min.css"&gt;