Font Awesome Icons导致Bootstrap导航栏高度过高如何解决

问题原因 #

• fa-2x类将图标字号设为2em，本身尺寸偏大
• .btn类默认自带上下内边距
• Font Awesome图标默认行高大于1，额外撑开了容器高度

解决方案 #

无需修改原有HTML结构，新增以下自定义CSS样式即可：

/* 清空社交按钮的默认上下内边距 */
.btn-social-icon {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1;
}
/* 调整图标对齐方式与行高，消除额外留白 */
.btn-social-icon i.fab {
  line-height: 1;
  vertical-align: middle;
  /* 若觉得图标仍偏大，可取消下方注释，自定义字号替代fa-2x的默认2em */
  /* font-size: 1.7em; */
}

将上述样式添加到页面的<style>标签或者引入的CSS文件中即可生效，修改后导航栏高度会和文本导航区域高度对齐，图标上下的留白会大幅缩小。

如果还需要进一步压缩导航栏整体高度，可以添加以下样式覆盖Bootstrap默认的导航栏内边距：

.navbar {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

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