如何将Font Awesome社交图标重定位至页面底部

原始问题说明 #

编辑：我后续已经找到了错误原因，是没有将CSS正确链接到HTML中。我将这个问题保留在此，希望能帮到其他确实有图标定位相关疑问的用户。

问题描述 #

我有两个分别关联GitHub和LinkedIn的Font Awesome图标，为了美观想要将这两个图标移动到目前还是空白的页面底部，但尝试后没有生效。

已尝试的解决方法 #

• 将position设置为relative/absolute
• 使用top-merger
• 设置width属性
• 设置margin: 0;
• 使用float属性
• 使用line-height属性
• 使用vertical-alignment属性
• 设置height属性

猜测的问题原因 #

我认为是使用了错误的代码来实现该元素的重定位。

原始代码 #

CSS代码

.fa:hover {
  opacity: 0.2;
}

.fa-github {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #55ACEE;
  color: white;
}

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Test H1</h1>
<p>Test p</p>


<a href="" class="fa fa-github"></a>
<a href="" class="fa fa-linkedin"></a>

原始效果 #

修复方案 #

要实现图标固定在页面底部的需求，可通过给图标增加父容器配合定位属性实现，修改后的代码如下：

调整后CSS #

/* 新增图标容器样式 */
.social-icons {
  /* 固定悬浮在视口底部，不需要悬浮可改为absolute，同时给body添加min-height: 100vh; position: relative; */
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%); /* 实现水平居中，不需要可以删除，自行调整left或right的值 */
  display: flex;
  gap: 16px; /* 两个图标之间的间距 */
}

.fa {
  padding: 12px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}

.fa:hover {
  opacity: 0.2;
}

.fa-github {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #55ACEE;
  color: white;
}

调整后HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Test H1</h1>
<p>Test p</p>

<div class="social-icons">
  <a href="" class="fa fa-github"></a>
  <a href="" class="fa fa-linkedin"></a>
</div>

调整后可实现图标固定在页面底部居中显示，所有数值均可根据实际视觉需求自行调整。

内容的提问来源于stack exchange，提问作者Mark F.