как заменить маркеры на значки еды в неупорядоченном списке в html

Question

У меня есть следующий код:

<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 1

Вы можете использовать свойство list-style-type с эмодзи или свойство list-style-image с img. Другое решение - установить для list-style-type значение none и вставить свой img в псевдоэлемент before.

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

Идея состоит в том, чтобы удалить стандартный стиль css неупорядоченного списка и использовать изображение или значок поверх него.

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 3

Не уверен, где вы sh можете получить изображения, но включили один предложенный источник.

Answer 4

Думаю, вам поможет.

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

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

Answer 5

Вот отличная ссылка именно на то, что вы ищете. Font-awesome должен иметь значки, которые вы можете использовать для каждого.

Пользовательский стиль списка li с иконкой font-awesome