3

I have the following code:

<div id="instructions">
   <h3>Get it done</h3>
   <ol>
      <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li>
      <li>Then whisk for 5 minutes</li>
      <li>Add the yeast and mix with a spatula gently.</li>
      <li>In a greased pan, pour the dough and bake in a medium oven (180 ºC) preheated for about 40 minutes.</li>
      <li>Don't forget to use a tall form for this recipe: as it takes two spoons of yeast, it grows a lot! Another solution may be to place just one spoon of yeast and keep your recipe in a small form.</li>
   </ol>
</div>

How to replace the bullet points with symbols like "egg", "timer", "mixer", "oven" ?

j08691
  • 204,283
  • 31
  • 260
  • 272
user221459
  • 95
  • 1
  • 7

4 Answers4

3

You can symply use the list-style-type property with emojis or the list-style-image property with img. An other solution would be to set list-style-type to none and insert your img in a before pseudo-element.

ol li:first-of-type {
  list-style-type: " ";
}

ol li:nth-of-type(2) {
  list-style-image: url("https://loremicon.com/grad/15/15/98708662/png");
}
<div id="instructions">
  <h3>Get it done</h3>
  <ol>
    <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.
    </li>
    <li>Then whisk for 5 minutes</li>
    <li>Add the yeast and mix with a spatula gently.</li>
    <li>In a greased pan, pour the dough and bake in a medium oven (180 ºC) preheated for about 40 minutes.</li>
    <li>Don't forget to use a tall form for this recipe: as it takes two spoons of yeast, it grows a lot! Another solution may be to place just one spoon of yeast and keep your recipe in a small form.</li>
  </ol>
</div>
LattyS
  • 145
  • 8
0

Not sure where you wish to obtain the images from, but have included one suggested source.

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://stackoverflow.com/questions/62432014/how-to-replace-bullet-points-with-food-icons-on-an-unordered-list-in-html -->
<style>
 ul { list-style-type: none; cursor: pointer; }
</style>

<!-- Images from: https://getemoji.com/#food-drink -->
</head><body>
<div id="instructions">
  <h3>Get it done</h3>
  <ol>
    <li>In a blender add the 
      <ul>
        <li>  eggs, </li>
        <li> chocolate powder, </li>
        <li>  butter, </li>
        <li> flour, </li>
        <li> sugar and </li>
        <li>  milk.</li>
      </ul>
    </li>
    <li>  Then whisk for 5 minutes</li>
    <li>Add the yeast and mix with a spatula gently.</li>
    <li>In a greased pan, pour the dough and bake in a medium oven (180 ºC) preheated for about 40 minutes.</li>
    <li>Don't forget to use a tall form for this recipe: as it takes two spoons of yeast,
 it grows a lot! Another solution may be to place just one spoon of yeast and keep your recipe in a small form.</li>
  </ol>
</div>
</body></html>
jmrker
  • 472
  • 4
  • 11
  • what I really want is to replace the bullet points with the icons, NOT inserting icons on text.. – user221459 Jun 17 '20 at 15:33
  • I'm not sure I see the difference in display results when using the
      tag without the bullets. But it is your design, so good luck!
     – jmrker Jun 17 '20 at 15:38
0

I think it will help you.

ol {
  list-style: none;
  padding: 0;
}

li.egg::before {
  content: url(your_image_url);
}
cooskun
  • 558
  • 1
  • 5
  • 20
0

The idea is to remove the default css style of unordered list and use an image or icon over it.

ol.food{
  list-style: none;
}

ol.food li:before {
  display: inline-block;
  margin-left: -20px;
  padding-right: 5px;
  width: 15px;
  
  /* Here you can place the food icon or image you want */
  content: "\f00c"; 
  font-family: FontAwesome;
  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="instructions">
   <h3>Get it done</h3>
   <ol class="food">
      <li class="egg">In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li>
      <li class="timer">Then whisk for 5 minutes</li>
      <li class="mixer">Add the yeast and mix with a spatula gently.</li>
      <li class="oven">In a greased pan, pour the dough and bake in a medium oven (180 ºC) preheated for about 40 minutes.</li>
      <li class="spoon">Don't forget to use a tall form for this recipe: as it takes two spoons of yeast, it grows a lot! Another solution may be to place just one spoon of yeast and keep your recipe in a small form.</li>
   </ol>
</div>
Anand Raj
  • 435
  • 2
  • 8