骤雨打新荷

相对于图片，字体图标的体积更小、扩展性更强、兼容性更高、也更灵活，在网页设计和软件开发中的应用十分广泛。像目前的许多wordpress响应式主题就采用了icon font设计，可以大大降低服务器的http请求，加快网页访问速度。那么如何使用字体图标呢？通常有三种方法：

想要获取免费图标字体，可以参考下面几篇文章：

12个免费图标字体资源网站推荐

七个高清图标字体搜索引擎推荐

一、直接将字符写在HTML文件中。

此方法简单、直观。用一个元素去包含一个字符“s”(即是字母“s”)，然后给这个添加一个类。该字母在选定的字体中被映射到一个特定的图标。代码如下：

为显示效果，还需编写样式类：.icon来决定此字符以哪种字体风格来显示，代码如下：

这是个简单的例子，但通常用字母当作为字符时，携带的信息量较少。字母可以被屏幕阅读器读取，而有时你只是想仅作为图片被看到而已。

二、通过css来生成内容。

我们可以不直接在html文件中添加字符，而是用css来生成字符内容。代码如下：

可以看出，添加了一个类名“cart”。神奇的事就发生在css中，跟上面一样，第一步先定义好字体，然后使用:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。

同样是需要使用字母s来映射出图标，只不过区别是移除了HTML标签换用了CSS样式实现。这是好事，但是，屏幕阅读器还是会读出字母的，这样子也不是很好。

三、使用“data-icon”属性

和上面类似的方法是使用html5的“data-”属性，接下来创建一个data-icon属性。

同上，我们也将添加需要的字体font-family，然后通过使用data-icon来创建字母（字符），如：

但是这样写还是会出现跟上面一样的问题，屏幕阅读器还是会读出字母的。

更好的 Data-Icon 方法

尝试去优化上面提到的Data-Icon方法，一是用类似的图标代表某个字符；二是直接使用标准的图标图片。

第一种做法，给当前元素添加一个新的属性：aria-hidden，并赋值为“true”。

aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，但是也不是对所有的平台都奏效。

再结合一些搭配使用的css属性，可以写成如下代码：

最后一个 speak: none，其实具体作用不是很可靠，写上只是为了以防万一，如果用上，就可以派上用场了。

关于使用图标字体的优缺点可以参考：使用图标字体的优点与缺点