什么是图标字体

图标字体简单来说就是外观呈现为图标的字体，同时具有矢量图形的特征，在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件，能够减少 HTTP 请求数，提高页面加载速度

图标字体产生的原因

在网站设计中，图片有诸多优点的，目前却面临各种各样的挑战。首先图片不但增加了总文件的大小，还增加了很多额外的”http请求”，这都会大大降低网页的性能的。其次图片不能很好的进行“缩放”，因此，在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。而在网页中使用“字符图标”来代替一些图片，可以达到一样的效果。

图标字体的优劣势

优势

1. 轻量 一个图标字体比一系列的图像要小。一旦图标字体加载，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
2. 灵活 图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件
3. 兼容性 网页字体支持所有现代浏览器，包括IE低版本

劣势

1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。 2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。 3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

如何使用图标字体

首先 增加图标字体库

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'); }

其次 引用到网页中，方法有如下三种：

• 把字符直接写在HTML文件里

如下代码，用一个元素去包含一个字符“!”，然后给这个添加一个类，把字母在映射到一个特定的图标。

<span class=”icon”>!</span>赞

编写样式类.Icon来决定此字符以哪种字体来显示，如下：

.icon {font-family: ‘ your-incofont -name ‘;}

• 使用css 来生成内容

  <a class=”icon praise”>赞</a>

添加了一个类名“praise”。第一步先定义好字体，然后使用:before伪元素来产生显示图标的字符.

.icon {font-family:’ your-incofont-name’ ;} .praise:before {content: “!”; }

• 用data-icon 属性

还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。 aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。

<span aria-hidden=”true” data-icon=”!”></span>赞

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

[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}

图标字体免费的资源

http://www.qianduan.net/icon-font-large-collecting.html