欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。

日常开发中我们常常用到:before和:after伪元素在指定标签前和后增加内容，非常方便，例如：

p:before{       content:'内容'；} p:before{       content:'内容';}

 如果是想利用:before和:after伪元素插入图标，我们可以用默认的字符图标或者引入图标库比如IconFont-阿里巴巴矢量图标库或者一张图标图片。

字符图标是计算机自带的图标，无需引入其他第三方文件，非常方便，但是有的用户计算机没有这个字符，就会显示成一个方框。

.example:before {   content:'\00AB';    …}.example:after {   content:'\00BB';    …}

相关参考content字符图标大全分享

图标库可以自定义，灵活很多，但是需要加载很多文件。

首先引入图标库，推荐使用阿里巴巴的Iconfont图标库，不会的看下面教程。

相关参考阿里巴巴IconFont矢量字体图标库在线工具

@font-face {    font-family: 'Iconfont';    src: url('fonts/Iconfont.eot?7kkyc2');    src: url('fonts/Iconfont.eot?7kkyc2#iefix') format('embedded-opentype'),        url('fonts/Iconfont.ttf?7kkyc2') format('truetype'),        url('fonts/Iconfont.woff?7kkyc2') format('woff'),        url('fonts/Iconfont.svg?7kkyc2#icomoon') format('svg');    font-weight: normal;    font-style: normal;}

CSS中可以重复调用，不会可以看下面详细教程。

span {    font-family: 'Iconfont';    font-size: 100px;    content:'\00BB';}

相关参考如何优雅的使用阿里巴巴IconFont字体图标(图文)

引入一张图片图标，对于特殊的图标，需要用图片完成的，同样可以before插入到页面中。

p:before{content:url(iconf.png);/**不可以加“”**/}

需要注意的是引入图片是content：后面不能用“”包起来，会被理解字符串做内容插入到页面中。