Question

如何在HTML中使用图标字体

Answer 1

一般来说，有3种方法：
1、把字符直接写在HTML文件里；
这个方法是简单比较直观，见如下代码，用一个<span>元素去包含一个字符“!”(或!)，然后给这个<span>添加一个类。这个字母在选定的字体中被映射到一个特定的图标。
<a href="javascript:;"><span cass="icon">!</span>赞</a><a href="javascript:;"><span cass="icon">!</span>赞</a>
为了显示效果，还需要编写样式类.Icon来决定此字符以哪种字体来显示，如下：
.icon {font-family: ' your-incofont -name ';}
2、使用css来生成内容；
它不直接在HTML文件里添加字符，而是用CSS来生成字符内容。代码如下
<a href="javascript:;" class="icon praise">赞</a>
可以看出，添加了一个类名“praise”。神奇的事就发生在CSS中，跟上面一样，第一步先定义好字体，然后使用:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。
.icon {font-family:' your-incofont-name' ;}.praise:before {content: "\f00a"; }
3、用data-icon属性
还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。
aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。
<a href="javascript:;"><span aria-hidden="true" data-icon="!"></span>赞</a>
结合一些搭配使用的CSS属性，可以写成如下代码
[data-icon]:before {font-family: ' your-incofont-name'; content: attr(data-icon);speak:none;}
参考地址：http://isux.tencent.com/icon-font.html