CSS3 中 圖標編碼 icon——Font-Awesome

在做網頁開發中經常會用到圖標，原來經常會到一些icon網站上找導入到項目中，現在Font-Awesome中的有很多的圖標，並且還在不斷更新

現在Font-Awesome最新版本是4.7，下載出來的Font-Awesome有下面這些文件，只保留css和fonts文件夾中的內容就可以了

新建一個html頁面，在html用引用css樣式

<link href="css/font-awesome.min.css" rel="stylesheet">

在官網中選擇好要引用的圖標點擊該圖標進去

<ul class="fa">
    <li class="fa fa-list-ul">百度</li><br/>
    <li  class="fa fa-list-ul">谷歌</li>
</ul>

頁面顯示注意引用樣式的時候要在樣式（fa-list-ul）前面加上fa

如果想改變圖標和文字顏色呢？

<ul class="fa">
    <li class="fa fa-list-ul">百度</li><br/>
    <span style="color:red;"><li  class="fa fa-list-ul">谷歌</li><span>
</ul>

頁面顯示

只需要在li標簽前面加上<span>標簽設置color顏色就可以了。

這里只是做一個簡單的介紹，還想了解更多可以看看官網的例子

還有一個Font-Awesome中文網站，不過版本沒有英文版本的新，可以參考下

 

IE9之前還只支持eot格式，需要將ttf格式轉換成eot格式

在線轉換工具 Webfont Generator

 

 

還可以參考一些文章 http://www.jb51.net/css/70033.html