title: list style image not showing icon
body: <p>I am new to html and css and I am trying to list items with an image called pie_bullet.png. There are many nested lists and I am not able to make it work. can anyone help me please?<br>
  The items I want to list with the image using css are the list items "li" in both classes</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul type="a"&gt;
    &lt;li&gt;preheat Oven: preheat oven to 350 degrees F(175 degrees C).&lt;/li&gt;
    &lt;li&gt;Make Lemon Filling: In a medium saucepan ...&lt;/li&gt;
    &lt;ul class="first"&gt;
      &lt;li&gt;Whisk together 1 cup sugar, flour, cornstarch, and salt.&lt;/li&gt;
      &lt;li&gt;Stir in water, lemon juice and lemon zest.&lt;/li&gt;
      &lt;li&gt;Cook over medium-high heat, stirring frequently, until mixture comes to a boil.&lt;/li&gt;
      &lt;li&gt;Stir in butter.&lt;/li&gt;
      &lt;li&gt;Place egg yolks in a small bowl and gradually whisk in 1/2 cup of hot sugar mixture.&lt;/li&gt;
      &lt;li&gt;Whisk egg yolk mixture back into remaining sugar mixture.&lt;/li&gt;
      &lt;li&gt;Bring to a boil and continue to cook while stirring constantly until thick.&lt;/li&gt;
      &lt;li&gt;Remove from heat.&lt;/li&gt;
      &lt;li&gt;Pour filling into baked pastry shell.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;li&gt;Make Meringue: In a large glass or metal bowl ...&lt;/li&gt;
    &lt;ul class="second"&gt;
      &lt;li&gt;Whip egg whites until foamy.&lt;/li&gt;
      &lt;li&gt;Add sugar gradually, and continue to whip until stiff peaks form.&lt;/li&gt;
      &lt;li&gt;Spread meringue over pie, sealing the edges at the crust.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;li&gt;Bake: Bake in preheated oven for 10 minutes, or until meringue is golden brown&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>