title: CSS background image on li:before not indenting properly
body: <p>I have this before on a list item like so:</p>
  
  <pre><code>li.list-item-2::before {
      content: '' !important;
      display: inline-block;
      height: 50px;
      width: 50px;
      background-image: url(/IMG_6331.jpg);
      background-size: cover;
  }
  </code></pre>
  
  <p>However when I use a background image it doesn't indent the list item properly (see image)</p>
  
  <p><a href="https://i.stack.imgur.com/7Qxhk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Qxhk.png" alt="enter image description here"></a></p>
  
  <p>But when I use content instead of background image like so:</p>
  
  <pre><code>ul.service-list-2 li:before {
      font-family: FontAwesome;
      content: "\f00c";
      margin: 0 5px 0 -15px;
      color: #4ba0e8;
  }
  </code></pre>
  
  <p>the list item is indented properly (see image)</p>
  
  <p><a href="https://i.stack.imgur.com/YA9PS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YA9PS.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong here?</p>