此问题在此处已有答案：

Strange underlines in font-awesome CSS（7个答案）
2天前关闭。
我正在使用Bootstrap 5.3.0开发一个HTML页面的页脚，结果发现当我添加图标时，它们旁边会出现一种下划线，我想这与这些元素之间白色有关，但空白不应该出现，而是一个不允许图标接触的透明边缘。

<footer class="text-center text-lg-start text-white" style="background-color: #1c2331">
    <section class="d-flex justify-content-between p-4" style="background-color: #6351ce">
        <div class="me-5">
            <span>Get connected with us on social networks:</span>
        </div>
                
        <div>
            <a href="" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-google"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-instagram"></i></a>
            <a href="" class="text-white me-3"><i class="fab fa-whatsapp"></i></a>
        </div>
    </section>
</footer>

显然，我试图删除冲突框，下划线消失了，但元素之间的分隔也消失了，我还试图改变图标，以防这是他们的问题，但事实并非如此。
我希望它有我现在的分离，但在图标结束的下划线消失，因为它看起来不可以接受。