Font Awesome图标上下出现异常线条的问题求助

问题原因 #

你遇到的线条问题，本质是按钮默认行高（line-height）与Font Awesome图标字体的渲染特性冲突，导致图标上下出现多余空白区域，透出背景差异；同时浏览器对按钮的默认样式也可能间接影响显示效果。

解决方案 #

修改CSS代码，调整按钮布局与行高，优化图标容器样式：

.shade {
  background-color: #00061ace;
  padding: 1rem;
}

.shade-btn {
  border: none;
  padding: 0;
  font-size: 1.7rem;
  color: white;
  /* 添加以下样式 */
  background: transparent; /* 确保按钮背景完全透明 */
  line-height: 1; /* 消除默认行高带来的多余空间 */
  display: inline-flex; /* 让图标完美居中 */
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 可选，优化交互体验 */
}

/* 移除span的背景设置（父元素已有相同背景，此设置冗余） */
/* button.shade-btn span {
  background-color: #00061ace;
} */

说明 #

1. line-height: 1：消除按钮默认行高带来的上下空白，避免图标上下出现多余的背景线条。
2. display: inline-flex + align-items/justify-content：确保图标在按钮内完全居中，避免因字体基线对齐导致的偏移。
3. 移除span的背景设置：父元素.shade已设置相同背景色，span的背景属于冗余设置，易引发渲染异常。

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