title: Creating an unordered list with image as the list item
body: <p>I want to create an un-ordered list with an image as the 'bullet point'.</p>
  
  <p>I have the following code:</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="a-checkpoint-list"&gt;
      &lt;ul&gt;
          &lt;li&gt;Test 1&lt;/li&gt;
          &lt;li&gt;Test 2&lt;/li&gt;
          &lt;li&gt;Test 3&lt;/li&gt;
          &lt;li&gt;Test 4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.a-checkpoint-list{
    list-style-image: url("images/Checkbox.svg");
    list-style-type: none;
    padding-left: 12px;
    font-size:16px;
    text-align:center;
    }
  </code></pre>
  
  <p>I would like for it to look like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/T9HWh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9HWh.png" alt="Checkpoint-list"></a></p>
  
  <p>at the center of the page. I cant seem to get it to look this way with my current css code. Any idea where I'm going wrong as I'm fairly new at this.</p>
  
  <p><strong>Updated code</strong></p>
  
  <p>css    </p>
  
  <pre><code>.mc-checkpoint-list &gt; ul{
  list-style-image: url('../images/Checkbox.svg');
  background-repeat: no-repeat;
  line-height: 30px;
  padding-left: 30px;
  font-size:16px;
  }
  
  .a-checkpoint-list{
  margin-left:40%;
  }
  </code></pre>
  
  <p>img
  <a href="https://i.stack.imgur.com/BjYh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BjYh8.png" alt="Test-description"></a></p>
  
  <p><strong>Working Code</strong></p>
  
  <p>css</p>
  
  <pre><code>.mc-checkpoint-list &gt; ul li{
      background-image: url(../images/checkbox.svg);
      list-style-type:none;
      background-repeat: no-repeat;
      line-height: 30px;
      padding-left: 30px;
      font-size:17px;
      margin-top:20px;
  </code></pre>
  
  <p>}</p>