我有下面的代码，请问如何用 "鸡蛋"、"定时器"、"搅拌器"、"烤箱 "等符号来代替要点？
<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>
如何用 "鸡蛋"、"定时器"、"搅拌器"、"烤箱 "等符号代替要点？
你也可以用 列表式 属性的表情符号或 列表式图片 另一个解决方案是将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>不知道你想从哪里获得图片，但已经包含了一个建议的来源。
<!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>
我想它会对你有所帮助。
ol {
list-style: none;
padding: 0;
}
li.egg::before {
content: url(your_image_url);
}
这个想法是去掉无序列表的默认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>这里有一个伟大的链接，正是你正在寻找的。Font-awesome应该有图标，你可以为每个图标使用。