接上两篇: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
制作图标字体工具: