Using CSS ::before to add a small icon before list links
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu"><a href="#">Home</a></li>
</ul>
</nav>
</div>