如何在相同高度上设置字体大小和 Font Awesome 图标答案

【问题标题】：How to set the font size and Font Awesome Icons on same height如何在相同高度上设置字体大小和 Font Awesome 图标
【发布时间】：2018-07-08 20:16:03
【问题描述】：

1) 第一个 div 中的所有元素的 font-size 为 16px。但看起来 Facebook 图标比 twitter 图标高。我怎样才能使它具有相同的高度？

2) 第二个 div 中的 Facebook 图标看起来比字体大小高，而 Twitter 图标看起来比字体大小小。如何更改图标的高度，使其具有与字体大小相同的高度？

或者知道有人可以替代所有图标高度相同的 font-awesome？

这是我当前的代码（您应该点击“运行代码片段”->“整页”）：

/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */

html, body{
  width: 100%;
  height:100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */

.clearfix::after{
	content:"";
	clear:both;
	display: block;
}

/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */

.entire-page{
  margin: 0 15%;
}


/* ########################################################################## */
/*  Menu */
/*  ########################################################################## */

.container{
  width:100;
  text-align:center;
}

nav a{
  text-decoration: none;
  color: #666;

}

nav li{
	float: left;
  background-color: #aaa;
  padding: 30px 30px;
}

.group2{
  display: inline-block;
  margin:0 auto;
}

.group2 .fa-facebook,
.group2 .fa-twitter{
  font-size:16px;
  line-height:16px;
  vertical-align:baseline;
}

.social-icons:hover{
  color:#E95D0F;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>

<body>

  <div class="entire-page">

    <!-- ########################################################################## -->
    <!--  Menu -->
    <!--  ########################################################################## -->
    <nav>
      <ul>

        <div class="container">

          <div class="group1">
            <li><a class="social-icons" href="#"><span><i class="fa fa-facebook" aria-hidden="true"></i></span> Facebook</a></li>
            <li><a class="social-icons" href="#"><span><i class="fa fa-twitter" aria-hidden="true"></i></span> Twitter</a></li>
          </div>

          <div class="group2">
            <li><a class="social-icons" href="#"><span><i class="fa fa-facebook" aria-hidden="true"></i></span> Facebook</a></li>
            <li><a class="social-icons" href="#"><span><i class="fa fa-twitter" aria-hidden="true"></i></span> Twitter</a></li>
          </div>

          

        </div>

      </ul>
    </nav>

  </div>

</body>
</html>

【问题讨论】：

font-size, line-height w/ vertical-align 在图标元素上
您的 Facebook 图标不高于您的 Twitter 图标；这是眼睛的把戏:)
@Ron Royston 如果我的文本字体大小为 16px，我应该为字体大小、行高和垂直对齐选择哪些值？
@Obsidian Age 我已经编辑了我的答案并添加了一张你可以看到的图片，它们有不同的尺寸。
@RonRoyston 我现在已经编辑了我的代码，但它仍然无法正常工作。我应该改变什么？ .group2 .fa-facebook, .group2 .fa-twitter{ 字体大小:16px;行高：16px；垂直对齐：基线； }

标签： html css css-position font-awesome font-size

【解决方案1】：

您可以使用fa-fw 类来修复大小并防止此问题。

例如： fa fa-fw fa-facebook

这适用于 Font Awesome 4.7 和 5

【讨论】：

【解决方案2】：

将它们放在一个具有单一字体大小样式的div 中。

在 CSS 文件中修改您的 .group3 选择器，如下所示

.group3 {
   font-size:30px;
}

Facebook 和 Twitter 图标高度由设计设置

【讨论】：