如何在相同高度上设置字体大小和 Font Awesome 图标
[英]How to set the font size and Font Awesome Icons on same height
问题描述
1) All the elements in the first div have font-size 16px. 
1) 第一个 div 中的所有元素的字体大小为 16px。 But it looks like the Facebook icon is taller than the twitter icon.但看起来 Facebook 图标比 Twitter 图标高。 How can I make it, that it has same height?我怎样才能使它具有相同的高度？
2) The Facebook icon in the second div look like it is taller than the font-size and the Twitter icon looks like it is smaller than the font-size. 2) 第二个 div 中的 Facebook 图标看起来比 font-size 高，而 Twitter 图标看起来比 font-size 小。 How can I change the height of the icons, that they have the same height like the font-size?如何更改图标的高度，使其与字体大小具有相同的高度？
Or know someone an alternative to font-awesome where all icons have same height?或者知道有人替代 font-awesome 的所有图标具有相同的高度？
Here's my current code (YOU SHOULD CLICK ON "Run Code Snippet" -> "FULL PAGE"):这是我当前的代码（您应该单击“运行代码片段”->“完整页面”）：
/* ########################################################################## */ /* 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>
2 个解决方案
解决方案1
0 2018-01-30 03:00:05
put them in one div with single font-size style.将它们放在一个具有单一字体大小样式的div 。
Modify your .group3 selector in CSS file, just like following在 CSS 文件中修改您的.group3选择器，如下所示
.group3 {
font-size:30px;
}
Facebook and Twitter icon height are set by design Facebook 和 Twitter 图标高度由设计设置
解决方案2
-1 2020-06-05 04:04:55
You can use fa-fw class to fix size and prevent this issue.您可以使用fa-fw类来修复大小并防止出现此问题。
For example: fa fa-fw fa-facebook例如： fa fa-fw fa-facebook
This works for Font Awesome 4.7 and 5这适用于 Font Awesome 4.7 和 5
More examples: https://fontawesome.com/v4.7.0/examples/更多示例： https : //fontawesome.com/v4.7.0/examples/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.