如何在相同高度上设置字体大小和 Font Awesome 图标
[英]How to set the font size and Font Awesome Icons on same height
问题描述
1) 第一个 div 中的所有元素的字体大小为 16px。 但看起来 Facebook 图标比 Twitter 图标高。 我怎样才能使它具有相同的高度？
2) 第二个 div 中的 Facebook 图标看起来比 font-size 高，而 Twitter 图标看起来比 font-size 小。 如何更改图标的高度，使其与字体大小具有相同的高度？
或者知道有人替代 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>
2 个解决方案
解决方案1
0 2018-01-30 03:00:05
将它们放在一个具有单一字体大小样式的div 。
在 CSS 文件中修改您的.group3选择器，如下所示
.group3 {
font-size:30px;
}
Facebook 和 Twitter 图标高度由设计设置
解决方案2
-1 2020-06-05 04:04:55
您可以使用fa-fw类来修复大小并防止出现此问题。
例如： fa fa-fw fa-facebook
这适用于 Font Awesome 4.7 和 5
如何显示“真棒字体”图标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.