最近将博客上面的小图标都换成了阿里的iconfont字体图标，在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome，它的免费版中有些我想要的图标没有，Pro版虽然多了很多，但是还不全，远没有使用iconfont来的随意，不过Font Awesome搭配了CSS框架，可以更加方便的使用一些css效果，比如：动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用，iconfont适合DIY。

最近将博客上面的小图标都换成了阿里的iconfont字体图标，其实很早之前就想换了，一直偷懒就没有去改。

当真正使用了之后发现，真香！iconfont上有海量的图标，替换图标也非常方便，现在也支持彩色字体图标了。

在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome，它的免费版中有些我想要的图标没有，Pro版虽然多了很多，但是还不全，远没有使用iconfont来的随意，不过Font Awesome搭配了CSS框架，可以更加方便的使用一些css效果，比如：动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用，iconfont适合DIY。

iconfont使用也比较方便，主要以unicode方式引用举例，创建一个项目，选择你需要的图标添加入库到对应的项目里面，生成对应的font-face，然后就可以愉快的使用起来了。默认生成的font-face不支持IE8及以下浏览器，可以在项目设置的字体格式里面把EOT勾上。

第一步在css文件里面引用生成的font-face

@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9 */ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');

第二步：定义使用iconfont的样式

.iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

第三步：挑选相应图标并获取字体编码，应用于页面

i > /i>

最后能在页面展示下图的效果。

在实际使用中，有些图标不是直接放到页面上的，而是类似background方式放到页面上的。这个时候就可以使用font-class方式来展示这些字体图标。

在2011年的时候写过一篇文章《JQuery+CSS实现分类菜单前面不同的图标》和demo，是通过JQuery和CSS配合在展示不同图标的，这里使用iconfont就非常简单了，通过伪类的方式展示图标，在元素之前或者元素之后加上一些内容，可以查看使用iconfont来实现的demo。

Html代码： div > ul > li > a>首页 /a> /li> li > a>关于 /a> /li> li > a>归档 /a> /li> li > a>留言 /a> /li> li > a>链接 /a> /li> /ul> /div>

同样引用生成的font-face。

@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9 */ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');

根据实际情况重新定义iconfont的样式

.page_item:before { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#444;

使用:before配合content，在元素之前加上图标的unicode编码，注意content里面引用的内容，比如Unicode编码是 他用&#x后面的4个字符 \e65e

.home:before{content: "\e65e";}.page-item-1:before{content: "\e60e";}.page-item-2:before{content: "\e9c0";}.page-item-3:before{content: "\e605";}.page-item-4:before{content: "\e606";}

最后

:before 和 :after算是很常用的伪类了，有时候我也会经常看到 ::before 和 ::after 这样的写法。

虽然效果好像差不多，但声明不同，伪类和选择器之间用一个冒号隔开，伪元素则是两个冒号隔。

伪类和伪元素的区别

伪类和伪元素都是为了给一些特殊需求加样式，定义上基本一致。伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自己虚拟的元素添加样式。:before和::before 与 :after和::after 写法是等效的。:before/:after 是Css2的写法，::before/::after 是Css3的写法。:before/:after 的兼容性要比 ::before/::after 好。

所以IE8及以上能支持 :before/:after 但IE8就不支持 ::before/::after 了，当然如果不需要IE8支持，就用双冒号(::)吧。

演示地址： VIEW DEMO