如何让三个Fontawesome方形图标实现水平相邻排列？

安全阿岳

2026-9-29

问题根源

类名冲突：外层容器使用fa作为类名，和FontAwesome图标的基础类名重复，导致定义的.fa样式同时作用到容器和所有图标元素上，样式逻辑混乱
行内元素默认间隙：包裹图标的<a>标签是行内元素，HTML代码里的换行会产生默认空格间隙，无法实现紧密排列

解决方案

1. 修改HTML类名

把外层容器的类名改为不冲突的名称，比如social-icons，修改后的代码如下：

<div class="social-icons">
    <a target="_blank" href="https://www.google.co.uk/">
        <i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i>
    </a>
    <a target="_blank" href="https://www.google.co.uk/">
        <i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
    </a>
    <a target="_blank" href="https://www.google.co.uk/">
        <i class="fa fa-github-square fa-3x" aria-hidden="true"></i>
    </a>
    <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
</div>

2. 调整CSS样式

使用Flex布局实现水平紧密排列，同时优化重复的透明度样式，修改后的代码如下：

.social-icons {
    padding-left: 15px;
    margin-top: 20px;
    padding-top: 15px;
    text-align: center;
    /* 新增flex布局实现水平排列 */
    display: inline-flex;
    align-items: center;
    /* 控制图标间距，设为0就是完全紧密相邻 */
    gap: 0;
}

/* 统一设置图标透明度，无需单独给每个图标重复写规则 */
.social-icons .fa {
    opacity: 0.4;
    transition: opacity 0.2s ease; /* 可选：添加过渡效果让hover变化更顺滑 */
}
.social-icons .fa:hover {
    opacity: 1;
}