關於icon小圖標的實現

1、使用CSS Sprite

即需要用到background-image和background-position這兩個屬性。

一般圖片應該保存爲png-24格式

通過background-image引入圖片後，再根據background-position定位圖片中小圖標的位置，從而得到自己想要的圖標

2、引用字體圖標

優點：

推薦使用IcoMoon，網站：icomoon.io

各瀏覽器對font字體文件的格式爲：

①我們通過@font-face來引入下載的字體。

@font-face{

font-family:"font-name"; //自定義字體名字

src:url("字體文件所在位置") format("文件格式對應的編碼");

font-weight:normal;

font-style:normal;

}

各字體文件所對應的format編碼（第一列）。

②引入字體後，我們要應用該字體圖標

.classname{

font-family:"font-name";

}

③在html文件中，需要根據下載的文件寫入字體圖標的16進制編碼。

打開下載的文件可以看到下面這個圖標的16進制的編碼爲f048。

在html中，

<span class="classname">&#xf048</span>

這樣子就可以在網頁中顯示這個圖標了。

需要注意的是：

第二行代碼中，爲什麼要加上?#iefix呢？

因爲不加上IE8是不會顯示的。

在css中，IE9的兼容模式，如果不加上上面的第一行代碼，圖標將不會顯示。

除了可以在html文件中使用16進制編碼引用小圖標外，我們還可以通過css的僞類來引入。

.classname:before{

content:"\f048"

}