Using CSS:: before to add a small icon before list links

Issue

The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.

Like I said the image is just a small diamond, its 5px by 5px

.list-menu::before {
  content: url('../images/menu-icons/image-before.png');
}

<div class="sb-slidebar sb-left sb-style-push">
  <nav>
    <ul>
      <li class="list-menu"><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

Solution

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('https://place-hold.it/16'); /* your image */
  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>

Answered By - James Donnelly