網頁中如何顯示圖標字體？ icon font在html中的顯示樣式

使用icon font來生成圖標相對於基於圖片的圖標來說，有如下的好處：

1.自由的變化大小

2.自由的修改顏色

3.添加陰影效果

4.IE6也可以支持

5.支持圖片圖標的其它屬性，例如，透明度和旋轉等等

6.可以添加text-stroke和background-clip:text等屬性，只要瀏覽器支持

文字修飾：

<h3>

<span aria-hidden=true data-icon=&#x21dd;></span>

Stats

</h3>

[data-icon]:before {

font-family: icons; /* BYO icon font, mapped smartly */

content: attr(data-icon);

speak: none; /* Not to be trusted, but hey. */

}

單獨圖標：

<a href=# class=icon-alone>

<span aria-hidden=true data-icon=&#x25a8;></span>

<span class=screen-reader-text>RSS</span>

</a>

/* Same CSS as above, plus */

.icon-alone {

display: inline-block; /* Chrome 19 was weird with clickability without this */

}

.screen-reader-text { /* Reusable, toolbox kind of class */

position: absolute;

top: -9999px;

left: -9999px;

}

如果大家需要創建自己的iconfont，推薦使用iconmoon，使用它你可以通過上傳SVG或者字體來生成你需要的icon字體，本文在線演示使用iconmoon生成。

請大家訪問在線演示查看效果。希望大家喜歡Icon字體。如果大家覺得圖標不夠光滑的話，可以考慮使用cufon做處理，這樣生成的圖標更加美觀。

來源：http://www.gbin1.com/technology/css/20120827-icon-font-usage/