I was building a barbershop website design using HTML, CSS, Bootstrap and JS, and I used Bootstrap icons to make a better look of some of its elements. Everything was going well concerning how I needed all the icons that I used from the first sections of the website to look like. Until the last section of it, which was the footer element.
When I was working on the last couple icons of some social media links, the output of these icons and all the other icons I used in the previous sections were not shown on the browser as they had to look like. Instead they appeared as if they were not fully uploaded and I had no clue how this happened nor did I know how to fix it.
this image below shows exactly how the icons currently appear : https://i.stack.imgur.com/YyCqt.jpg
I checked the code to see if there were any mistakes I might have made in the syntax or misplacements of some text elements, but everything looked just fine. I even tried to change the icons I used when the problem emerged to other different ones, entirely unrelated to what it is needed, just to check if they could appear correct but it didn't work out.
this is the code where everything went wrong with those icons :
<li class="me-3"><a href="_blank"><i class="bi bi-twitter text-white-50"></i></a></li>
<li class="me-3"><a href="_blank"><i class="bi bi-facebook text-white-50"></i></a></li>
<li class="me-3"><a href="_blank"><i class="bi bi-instagram text-white-50"></i></a></li>
<li class="me-3"><a href="_blank"><i class="bi bi-linkedin text-white-50"></i></a></li>
I would be glad and grateful if anyone could help me with this.