使导航栏太大的字体真棒图标答案

【问题标题】：Font Awesome Icons making navbar too big使导航栏太大的字体真棒图标
【发布时间】：2021-11-07 21:00:30
【问题描述】：

我的 Font Awesome 图标方块让我的导航栏更高了。所有边距和内边距都已重置为 0。我尝试调整图标的边距和内边距但没有成功，包括将顶部和底部边距/内边距设为负值。

我希望正方形刚好适合空间，以便图标和导航栏顶部/底部之间的空间非常小。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class="navbar navbar-expand-sm fixed-top bg-primary">
  <div class="container">
    <div class="navbar-brand text-white d-flex justify-content-start">Vince Clicks</div>
    <div class="nav-collapse d-flex justify-content-between" id=" Navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item scroll active"><a class="nav-link text-white" href="#home">Home</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#about">About</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#skills">Skills</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#contact">Contact</a></li>
      </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
    <div class="d-flex justify-content-end">
      <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
      <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                            class="fab fa-2x fa-linkedin"></i></a>
    </div>
  </div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

尝试在你的 style.css 中添加这个样式

.fab{font-size:10px;}

您可以增加/减小字体大小以获得更大/更小的 fonawesome 图标。

【讨论】：

我不想改变图标的大小。我喜欢它们是 fa-2x 大小。当我改变它们以使它们更大时，问题就来自于此。我希望它们在导航栏变大的情况下保持更大。
尝试添加位置：绝对；图标。

【解决方案2】：

不确定这是否是最佳解决方案，但为我的导航栏设置最大高度确实可以解决问题。

【讨论】：

【解决方案3】：

只需设置导航的高度

   nav{
    height:60px;
   }

nav{
height:60px;}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class="navbar navbar-expand-sm fixed-top bg-primary">
  <div class="container">
    <div class="navbar-brand text-white d-flex justify-content-start">Vince Clicks</div>
    <div class="nav-collapse d-flex justify-content-between" id=" Navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item scroll active"><a class="nav-link text-white" href="#home">Home</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#about">About</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#skills">Skills</a></li>
        <li class="nav-item scroll"><a class="nav-link text-white" href="#contact">Contact</a></li>
      </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
    <div class="d-flex justify-content-end align-items-center">
      <a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
      <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                            class="fab fa-3x fa-linkedin"></i></a>
    </div>
  </div>
</nav>

【讨论】：