[英]how to replace bullet points with food icons on an unordered list in html
我有以下代码：
<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>
如何用“egg”、“timer”、“mixer”、“oven”等符号替换项目符号？
您可以将list-style-type属性与 emojis 或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>
不确定您希望从哪里获取图像，但已包含一个建议的来源。
<!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 应该有每个图标都可以使用。
你如何在 html/css/javascript 中为项目符号点制作自定义图标
[英]How do you make custom icons for bullet points in html/css/javascript
React，如何用 TreeView 中的图像替换无序列表项目符号？
[英]React, How to replace Unordered list bullets with images in the TreeView?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.