I have found many answers that solve this with CSS or font awesome, however, I have an icon from https://react-icons.github.io/react-icons/icons?name=bi and I want to replace the li tag bullets with one of these icons.
I tried adding <IconName /> in front of each <li> but this doesn't look great and requires lots of styling and so was wondering if there was a simpler solution.
Create a class in your ul and then style your CSS as seen below:
HTML:
<ul class="sample">
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is also another list item</li>
</ul>
CSS:
ul.sample {
list-style-image: url('**your icon path ** icon_sample.jpg');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.