使用Bootstrap 5.3开发HTML页脚时Font Awesome图标出现下划线问题

问题根源 #

你看到的下划线不是元素间的空格本身，而是浏览器把<a>标签之间的换行、空格解析成了空白文本，而<a>标签默认自带text-decoration: underline样式，这个空白文本继承了该样式，所以看起来像是图标旁边多出了下划线。

解决方案 #

最简洁的方式是利用Bootstrap自带的类消除下划线，同时保留图标间距：

方案1：添加Bootstrap的text-decoration-none类

直接给每个包含图标的<a>标签加上text-decoration-none类，它会覆盖<a>标签默认的下划线样式，而me-3类依然维持图标间的间距。

修改后的完整代码：

<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 text-decoration-none"><i class="fab fa-facebook-f"></i></a>
            <a href="" class="text-white me-3 text-decoration-none"><i class="fab fa-google"></i></a>
            <a href="" class="text-white me-3 text-decoration-none"><i class="fab fa-instagram"></i></a>
            <a href="" class="text-white me-3 text-decoration-none"><i class="fab fa-whatsapp"></i></a>
        </div>
    </section>
</footer>

方案2：自定义CSS局部消除下划线

如果不想给每个<a>标签加类，可以用CSS精准定位页脚里的社交图标链接，统一去掉下划线：

footer .d-flex > div:last-child a {
  text-decoration: none;
}

将这段CSS添加到你的样式文件中即可，效果和方案1一致。

方案3：消除HTML空白（不推荐）

你之前尝试过删除元素间空格，也可以用HTML注释消除空白同时保留me-3间距，不过这种写法不够直观：

<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>

最优选择 #

优先选方案1，完全贴合Bootstrap的使用规范，代码简洁易维护，同时完美满足你「保留间距+消除下划线」的需求。

内容的提问来源于stack exchange，提问作者XNeyMo