1

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.

Ken
  • 1,155
  • 2
  • 19
  • 36

1 Answers1

2

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');
}
Mamdlv
  • 540
  • 8
  • 23
  • Thanks, but the icon is not an image it is a component I imported – Ken Jan 24 '21 at 06:01
  • Ah I see, a little more complex for sure.... maybe this will help you out? It's for font awesome but could be applied to react icons as well? https://stackoverflow.com/questions/12468359/using-font-awesome-icon-for-bullet-points-with-a-single-list-item-element – Mamdlv Jan 24 '21 at 06:24