如何在HTML中使用图标字体

如何在HTML中使用图标字体 - icon font

本文主要是介绍如何在HTML中使用图标字体 - icon font，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

日期：2012-8-27 来源：GBin1.com

在线演示本地下载

主要特性

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：

自由的变化大小
自由的修改颜色
添加阴影效果
IE6也可以支持
支持图片图标的其它属性，例如，透明度和旋转等等
可以添加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;
}