如何在相同高度上設置字體大小和 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.