Swapping out bullet points for delicious food icons in an unordered list on an HTML page

Question

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet:

<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 can I replace the bullet points in the list with symbols like "egg", "timer", "mixer", and "oven"?

javascript html css tags

Answer 1

Answer №1

To add some flair to your list items, you have a few options. You can either use emojis with the list-style-type property or insert images using the list-style-image property. Another creative approach is to hide the default list style by setting list-style-type to none and then adding your desired image using 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>

Answer 2

To add some flair to your list items, you have a few options. You can either use emojis with the list-style-type property or insert images using the list-style-image property. Another creative approach is to hide the default list style by setting list-style-type to none and then adding your desired image using 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>

Answer 3

Answer №2

Unsure of the exact location you want to retrieve the images from, but I have included a recommended source.

<!DOCTYPE html><html lang="en"><head><title> Sample Page </title>
<meta charset="UTF-8>
<meta name="viewport" content="width-device-width,initial-scale=1.0,user-scalable=yes"/>
<!-- Source: 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 obtained from: https://getemoji.com/#food-drink -->
</head><body>
<div id="instructions">
  <h3>Get it done</h3>
  <ol>
    <li>In a blender, mix 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 gently mix with a spatula.</li>
    <li>Pour the dough into a greased pan and bake in a preheated medium oven (180 ºC) for about 40 minutes.</li>
    <li>Remember to use a tall form as this recipe requires two spoons of yeast,
 it rises significantly! Alternatively, you can use just one spoon of yeast and bake in a smaller form.</li>
  </ol>
</div>
</body></html>

Answer 4

Unsure of the exact location you want to retrieve the images from, but I have included a recommended source.

<!DOCTYPE html><html lang="en"><head><title> Sample Page </title>
<meta charset="UTF-8>
<meta name="viewport" content="width-device-width,initial-scale=1.0,user-scalable=yes"/>
<!-- Source: 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 obtained from: https://getemoji.com/#food-drink -->
</head><body>
<div id="instructions">
  <h3>Get it done</h3>
  <ol>
    <li>In a blender, mix 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 gently mix with a spatula.</li>
    <li>Pour the dough into a greased pan and bake in a preheated medium oven (180 ºC) for about 40 minutes.</li>
    <li>Remember to use a tall form as this recipe requires two spoons of yeast,
 it rises significantly! Alternatively, you can use just one spoon of yeast and bake in a smaller form.</li>
  </ol>
</div>
</body></html>

Answer 5

Answer №3

I believe this solution will be beneficial to you.

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

li.egg::before {
  content: url(your_image_url);
}

Answer 6

I believe this solution will be beneficial to you.

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

li.egg::before {
  content: url(your_image_url);
}

Answer 7

Answer №4

One creative approach is to eliminate the default CSS styling of an unordered list and replace it with an image or icon.

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>

Answer 8

One creative approach is to eliminate the default CSS styling of an unordered list and replace it with an image or icon.

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>

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Angular to integrate with an external API

Is anyone else experiencing issues with the jQuery slide-in not working on a particular website? How can I determine which version of jQuery is compatible with this site?

What steps do I need to take to create npm packages specifically for react-native development?

What options are available for managing state in angularjs, similar to Redux?

Form Input Field with Real-Time JavaScript Validation

Loading external templates in Angular2 with Webpack2

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

Search in the Firestore database for documents that have a field containing a reference to another document. Once those results are found, use the reference to conduct a second query

Animate the transition effect as soon as the block is displayed

Issue with Quantity Box not displaying values in Shopify store

Tips for transferring data between two forms in separate iFrames

What could be the reason for the HTML canvas not displaying anything after a new element is added?

Tips for creating a multitude of components

Using the onreadystatechange method is the preferred way to activate a XMLHttpRequest, as I am unable to trigger it using other methods

As the user types, automatically format the input field for a seamless and intuitive experience

Adding a type declaration to the severity property in React Alert - A guide to Typescript

Implementing a vertical divider line in between columns with Foundation CSS

Prevent a specific folder from being included in expressjs routing

Numerous applications of a singular shop within a single webpage

Error Encountered During Building Apache Cordova Project in Visual Studio 2015