I recently designed a webpage showcasing different parts of a privacy policy. Using Bootstrap and its accordion feature, I successfully displayed the information with standard icons. However, I encountered an issue where the accordion initially loads with minus icons displayed instead of the desired plus icons.
Upon expanding the item, the collapse (minus) icon is correctly shown, but upon collapsing it, the plus icon should be displayed. This discrepancy has left me puzzled as I am not well-versed in CSS/HTML. Despite referencing resources and implementing what should work in the CSS, the icons still do not display as intended.
The icons used were converted from SVG format using a URL encoder tool. Additionally, the CSS file I referenced to create the accordion icons can be found in a tutorial linked here.
Below is a snippet of the CSS code responsible for changing the accordion icons:
.accordion {
--bs-accordion-btn-bg: #e5e7eb;
--bs-accordion-active-bg: #e5e7eb;
--bs-accordion-bg: #e5e7eb;
margin-bottom: 0.5rem; /* Set spacing at bottom of accordian item */
}
.accordion-button {
font-size: 2rem;
font-weight: 700;
}
.accordion-button::after {
...
}
.accordion-button:not(.collapsed)::after {
...
}
Despite using fontawesome icons in my project and ensuring their successful display, the issue with the accordion icons persists. Attached below is a snippet from the HTML where item 10 on the accordion is defined:
<div class="container">
<div class="accordion" id="privacyAccordion10">
...
</div>
</div> <!-- End of 10th Item -->
For further reference, the development tools display a snapshot providing insight into the issue. Any assistance or guidance on resolving this matter would be greatly appreciated.