主要特性
使用icon font來(lái)生成圖標(biāo)相對(duì)于基于圖片的圖標(biāo)來(lái)說(shuō),有如下的好處:
1.自由的變化大小
2.自由的修改顏色
3.添加陰影效果
4.IE6也可以支持
5.支持圖片圖標(biāo)的其它屬性,例如,透明度和旋轉(zhuǎn)等等
6.可以添加text-stroke和background-clip:text等屬性,只要瀏覽器支持
如何使用?
文字修飾:
<h3>
<span aria-hidden="true" data-icon="⇝"></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. */
}
單獨(dú)圖標(biāo):
<a href="#" class="icon-alone">
<span aria-hidden="true" data-icon="▨"></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;
}
創(chuàng)建你自己的icon font - IcoMoon
如果大家需要?jiǎng)?chuàng)建自己的iconfont,推薦使用iconmoon,使用它你可以通過(guò)上傳SVG或者字體來(lái)生成你需要的icon字體,本文在線演示使用iconmoon生成。
步驟1:選擇他們提供的或者上傳自己的
步驟2:
請(qǐng)大家訪問(wèn)在線演示查看效果。希望大家喜歡Icon字體。如果大家覺得圖標(biāo)不夠光滑的話,可以考慮使用cufon做處理,這樣生成的圖標(biāo)更加美觀。
來(lái)源:http://www.gbin1.com/technology/css/20120827-icon-font-usage/
新聞熱點(diǎn)
疑難解答