Edit in JSFiddle

a{ display:block; line-height: 14px;}
a:nth-child(1):before{
    content: ""; float: left; width: 16px; height: 16px; 
    background: url(https://s3.amazonaws.com/icon_maven_production/uploads/icon_set/sample_image/8/medium_glyphicons.png) no-repeat 0 0;
}
a:nth-child(2):after{
    content: ""; float: right; width: 16px; height: 16px;
    background: url(https://s3.amazonaws.com/icon_maven_production/uploads/icon_set/sample_image/8/medium_glyphicons.png) no-repeat -20px 0;
}
<a>I have the icon :before me</a> 
&amp; 
<a>I have the icon :after me</a>