after extensive research I have not found a way to be able to customize carousel indicators with bootstrap (re.l 5). I would like to replace the default carousel indicators with a symbol from font awesome but I am stuck. Here is where I have come and am stuck.
Html:
<ol class="carousel-indicators">
<li data-bs-target="#quotes" data-bs-slide-to="0" class="active"><h2><i class="fa-solid fa-lightbulb"></i></h2></li>
<li data-bs-target="#quotes" data-bs-slide-to="1"></li>
<li data-bs-target="#quotes" data-bs-slide-to="2"></li>
</ol>
css:
.carousel-indicators li {
display: inline-block;
width: 38px !important;
height: 38px !important;
margin: 1px;
text-indent: 0px !important;
border: none !important;
border-radius: 50%;
color: red;
}
The symbol is displayed but is displayed also the default indicators. The symbol is red just to highlight it.
Can you help me? Thank you!