如何在HTML中使用图标字体

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-i

CSS中用字体标签画icon图标方法：

1、先引入字体标签字体；

2、在相关标签内使用（例：如下）。

<link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <span class="fa fa-phone"></span>

---