Question

1）第一个div中的所有元素都有font-size 16px。但看起来Facebook图标比twitter图标更高。我该怎么做，它有相同的高度？

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

或者知道有人替换font-awesome所有图标都有相同的高度？

这是我当前的代码（您应该点击＆＃34;运行代码片段＆＃34; - ＆gt;＆＃34;完整页面＆＃34;）：

＆＃13;

/* ########################################################################## */
/* 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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

将它们放在一个div中，使用单一字体大小的样式。

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

.group3 {
   font-size:30px;
}

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

Answer 2

您可以使用fa-fw类来固定大小并防止出现此问题。

例如： fa fa-fw fa-facebook

这适用于Font Awesome 4.7和5

更多示例： https://fontawesome.com/v4.7.0/examples/

如何在相同的高度设置字体大小和字体真棒图标

2 个答案: