引入Font Awesome社交媒体图标尺寸异常，我的CSS代码哪里出错了？

问题排查及修复方案 #

核心问题点 #

• 未为Font Awesome的图标元素<i>设置字体大小：Font Awesome图标本质是字体渲染，默认字号偏小会直接导致显示尺寸异常
• 绝对定位的<ul>缺少相对定位的父容器：当前<ul>的定位基准是全局视口而非你期望的.container容器，且top:50%的配置会让图标组显示在视口垂直中间，不符合放在页面顶部的需求
• 图标容器<a>缺少垂直居中配置：默认状态下图标会显示在圆形按钮的顶部而非正中间，也会造成视觉上的尺寸异常
• section的100vh高度+上下100px边距的设置，会挤占顶部图标组的显示空间，容易出现边缘裁切

修复代码 #

新增/修改CSS

/* 给父容器加相对定位，作为ul的定位基准 */
.container {
  position: relative;
  /* 原有样式保留不变 */
}

/* 修改ul的定位属性，调整到container顶部 */
ul {
  top: -30px; /* 可根据显示效果调整数值，负值会让图标组飘在container上方 */
  transform: translate(-50%, 0);
  /* 原有样式保留不变 */
}

/* 给a标签加行高，让图标垂直居中 */
ul li a {
  line-height: 60px;
  /* 原有样式保留不变 */
}

/* 新增图标尺寸样式，可根据需要调整字号 */
ul li a i {
  font-size: 28px;
  color: #333; /* 可自定义图标颜色 */
}

如果修改后还存在图标被裁切的问题，可把section的margin: 100px 0调整为margin: 130px 0 100px，给顶部的图标组预留足够的显示空间即可。

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