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

What could be causing the input field state to remain static even as I type in the MUI textField?

In the callback function within Array.prototype.map, make sure to access the newly created array

Having trouble locating the nivoslider IE8 jQuery bug, can't seem to track it

Angular JS Integration with PapaParse

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

Is there a way to dynamically set a database path in Express.js depending on the user's login status?

Why does my CSS attribute selector fail to update when the property's value changes?

Passing PHP loop values to JavaScript

I'm facing an issue where there is no "Access-Control-Allow-Origin" header present. Looking for assistance in converting it to JSONP using the POST method. Can anyone provide guidance?

Minimize white spaces when validating input fields in a form using Javascript

Continuous Load More: Loads content infinitely until a page is fully loaded

Creating a mouse-resistant div with a magnet-like effect

Updating padding through local storage does not function as intended

What are the buttons featured in the header of this mobile-friendly bootstrap panel

How to use the transform function in JavaScript

Parsing JSON data in array format sent from jQuery and processed by Node.js

Prevent elements from overlapping within a flexbox container

Defining the signature of an unnamed function in TypeScript

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

Guide to periodically updating and displaying a <b-img> element in VueJS