相对于图片，字体图标的体积更小、扩展性更强、兼容性更高、也更灵活，在网页设计和软件开发中的应用十分广泛。像目前的许多wordpress响应式主题就采用了icon font设计，可以大大降低服务器的http请求，加快网页访问速度。那么如何使用字体图标呢？通常有三种方法：
想要获取免费图标字体，可以参考下面几篇文章：
一、直接将字符写在HTML文件中。
此方法简单、直观。用一个元素去包含一个字符“s”(即是字母“s”)，然后给这个添加一个类。该字母在选定的字体中被映射到一个特定的图标。代码如下：
- <a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>
为显示效果，还需编写样式类：.icon来决定此字符以哪种字体风格来显示，代码如下：
- .icon {font-family: 'your-chosen-icon-font';}
这是个简单的例子，但通常用字母当作为字符时，携带的信息量较少。字母可以被屏幕阅读器读取，而有时你只是想仅作为图片被看到而已。
二、通过css来生成内容。
我们可以不直接在html文件中添加字符，而是用css来生成字符内容。代码如下：
- <a href="shopping-cart.php" class="icon cart"> View Cart</a>
可以看出，添加了一个类名“cart”。神奇的事就发生在css中，跟上面一样，第一步先定义好字体，然后使用:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。
- .icon { font-family: 'your-chosen-icon-font';} .cart:before {content: "s"; }
同样是需要使用字母s来映射出图标，只不过区别是移除了HTML标签换用了CSS样式实现。这是好事，但是，屏幕阅读器还是会读出字母的，这样子也不是很好。
三、使用“data-icon”属性
和上面类似的方法是使用html5的“data-”属性，接下来创建一个data-icon属性。
- <a href="shopping-cart.php" class="icon" data-icon="s"> View Cart</a>
同上，我们也将添加需要的字体font-family，然后通过使用data-icon来创建字母（字符），如：
- .icon {font-family: 'your-chosen-icon-font';} .icon:before {content: attr(data-icon);}
但是这样写还是会出现跟上面一样的问题，屏幕阅读器还是会读出字母的。
更好的 Data-Icon 方法
尝试去优化上面提到的Data-Icon方法，一是用类似的图标代表某个字符；二是直接使用标准的图标图片。
第一种做法，给当前元素添加一个新的属性：aria-hidden，并赋值为“true”。
- <a href="shopping-cart.php"><span aria-hidden="true" data-icon="s"></span>View Cart</a>
aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，但是也不是对所有的平台都奏效。
再结合一些搭配使用的css属性，可以写成如下代码：
- [data-icon]:before {font-family: your-chosen-font; content: attr(data-icon);speak: none;}
最后一个 speak: none，其实具体作用不是很可靠，写上只是为了以防万一，如果用上，就可以派上用场了。
关于使用图标字体的优缺点可以参考：使用图标字体的优点与缺点
