Bootstrap double glyphicon

Experimenting with :before and :after to use double, or hopefully triple icons in one html element

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<ul class="pager panel panel-default panel-body">
<li class="previous "><a title="Previous" href="#" class="btn btn-default btn-xs "><span class="glyphicon glyphicon-arrow-left"></span></a></li>
<li class="home "><a title="Gallery" href="#" class="btn btn-default btn-xs "><span class="glyphicon glyphicon-th"></span></a></li>
<li class="next "><a title="Next" href="#" class="btn btn-default btn-xs "><span class="glyphicon glyphicon-arrow-right"></span></a></li>
<li class=" "><a title="1" href="#" class="btn btn-default btn-xs ">1</a></li>
<li class=" "><a title="2" href="#" class="btn btn-default btn-xs ">2</a></li>
<li class=" "><a title="3" href="#" class="btn btn-default btn-xs ">3</a></li>
<li class=" "><a title="S" href="#" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-picture"></span>
</a></li>
</ul>

CSS

.glyphicon-picture,
.glyphicon-picture:before,
.glyphicon-picture:after{
    content: "\e060";
    position: absolute;
}
.glyphicon-picture:before {
    font-size: 0.8em;
    left: -2px;
    top: 2px;
    z-index: -2;
}
.glyphicon-picture{
    font-size: 1.2em;
    position: relative;
    top: -0.7em;
    z-index: 1;
    padding-left: 1em;
}
.glyphicon-picture:after{
    background-color: pink;
    line-height: 0.8em;
    left: 3px;
    z-index: -1;
}