J'ai le code suivant:
<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>
Comment remplacer les puces par des symboles comme "oeuf", "minuterie", "mixeur", "four"?
5 Réponses :
Voici un excellent lien vers exactement ce que vous recherchez. Font-awesome devrait avoir des icônes que vous pouvez utiliser pour chacun d'eux.
bien Font Awesome n'a pas les icônes que je veux ...
vous pouvez suivre les mêmes étapes et remplacer simplement le contenu: "\ f00c" par l'icône dont vous avez besoin @ user221459
Vous ne savez pas d'où vous souhaitez obtenir les images, mais vous avez inclus une source suggérée.
<!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>
ce que je veux vraiment, c'est remplacer les puces par les icônes, PAS insérer des icônes sur le texte.
Je ne suis pas sûr de voir la différence dans les résultats d'affichage lors de l'utilisation de la balise
Je pense que cela vous aidera.
ol {
list-style: none;
padding: 0;
}
li.egg::before {
content: url(your_image_url);
}
Vous pouvez utiliser symply le list-style- type avec des émoticônes ou la list- propriété style-image avec img. Une autre solution serait de définir list-style-type sur none et d'insérer votre img dans un pseudo-élément avant.
<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>
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");
}
L'idée est de supprimer le style CSS par défaut de la liste non ordonnée et d'utiliser une image ou une icône dessus.
<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>
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;
}
Je suis que votre suggestion n'a pas fonctionné ... Je reçois des tiques ..
tick est un exemple. Vous pouvez remplacer le css des tiques par l'icône de nourriture correspondante
Je pense que la solution acceptée n'est pas bonne pour les très longues listes. Si le contenu de la liste est généré dynamiquement, il peut échouer
J'espère que cet exemple pourrait être quelque peu proche de vos attentes, codepen.io/Maniraj_Murugan/pen/bGEBrxj