做一个萌萌哒的button之图标字体

接上两篇：http://blog.csdn.net/u010037043/article/details/47035087

http://blog.csdn.net/u010037043/article/details/47035077



图中两个王冠就是图标字体，这里主要是介绍怎样使用图标字体，怎样制作图标字体见文章末尾连接。

一、为什么使用图标字体

a.它能够完成图片能够做的事情（比如：修改透明度、旋转等）

b.能够做图片做不了的事情（比如：随意缩放，不会出现图片放大后的模糊；方便改变颜色，进行形变;针对不同尺寸的屏幕效果一样，而图片在尺寸相差很大的屏幕上显示效果差异明显等）

c.体积比图片小，不需要每个字符进行依次http请求

二、如何使用图标字体

a.直接写入html中

在制作好的字体中字母被映射到一个特定的图标，我们可以直接使用字母。比如：

<span>a</span>

在你自己制作图标字体的时候，你可以让字母“A”代表任何一个图标。

b.使用伪元素添加

利用:before或者:after添加图标，将字母写在伪元素的content属性中。

.icon:after{
content:"A";
}

c.利用html5的“data-”属性

在html5中我们可以自定义属性，属性名以data-开头。然后通过伪元素的content来使用：content: attr(data-icon);使用这样的写法与content:A相比的优势在于我们可以动态修改data-icon的值，attr表达式可以从页面元素中动态的获取内容。

<a class="king" href="#" data-icon="♚">king</a>

a:before {
font: 1.2em/0 'Pictos', sans-serif;
content: attr(data-icon);
margin-right: 0.4em; }

第一、二种对网页的无障碍阅读不利，字母会被屏幕阅读器读取，却几乎没有信息量。

怎样制作图标字体：

https://github.com/blog/1135-the-making-of-octicons

制作图标字体工具：

http://old.fontlab.com/font-editor/font-editors-overview/

https://glyphsapp.com/