Bootstrap框架中的字形图标的理解

最近项目中准备使用 Bootstrap 框架，看中了Ace Admin 这套皮肤，看其代码的时候，发现使用了字形图标。下面内容来源于网络，根据自己对新知识的学习曲线重新整合了一下：

一，字形图标的定义和产生原因：

字形图标（Glyphicons）是在 Web 项目中使用的图标字形。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接。（原文）

以往做web页面图标时，都是采用的gif或者png的透明格式对图标进行处理。这些图标体积小、数量多，虽然使用css sprite可以解决请求数和图片体积的问题，但是这些图标的大小是固定的。而且在透明度的处理上，始终无法那么的完美，尤其是用在具有调换背景色功能的 页面中，该缺陷更是明显。

与图片图标相比，字形图标的优势就要大的多。由于字形图标是矢量图，因此无论将其放大多少倍都可以保持其最原始的形态，不会出现模糊与变形的问题。其次是字形图标不用考虑如何处理透明度的问题，而且字形图标可以通过css样式来修改它的颜色，使其更容易操控与改变。

总体来说，字形图标由于其矢量性非常适合用在当今流行的响应式页面设计中。尤其是在移动设备的展现效果上尤为突出。(原文)

二，字形图标vs图片图标的优势与弱势：(查看原文请移步：原文)

字形图标除了图像清晰度之外，比位图还有哪些优势呢?
1、轻量性：一个图标字形比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字形加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2、灵活性：图标字形可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性：网页字形支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。

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

三，如何获取图标字形及使用

要想获取图标字形，不外乎两种途径，其一找到付费网站购买，其二就是到免费网站下载，提供免费下载网站很多，神飞曾经发表过一篇博客icon font大搜罗，上面罗列好多的免费网站的地址，大家有兴趣可以去下载。如何使用呢？一般来说，有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;}

四，Bootstrap中字形图标的列表：

Font Awesone  : http://fontawesome.io/cheatsheet/
Glyphicons　　 : http://www.w3cschool.cc/try/demo_source/bootstrap3-glyph-icons.htm
Google　　　　 :没找到，呵呵。

五，部分推荐的资源：

1，Iconfont-阿里巴巴矢量图标库 ;

2，Font Awesome

六，待完善环节：

上述知识并不全面，还需要一些补充，如：

1，字形中文的问题；

2，如何制作自定义图标字形：可以看这篇文章：链接；