Bootstrap 5 customize carousel indicators with awesome font

Question

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!