My Font Awesome icon squares are making my navbar taller. All the margin and padding has been reset to 0. I've tried adjusting the margin and padding of the icons with no success, including making the top and bottom margin/padding negative.
I would like the squares to just fit in the space so that there is very little space between the icons and the top/bottom of the navbar.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>CodePudding user response：
Try to add this style in your style.css
.fab{font-size:10px;}
you can increase/decrease font size for getting a larger/smaller fonawesome icon.
CodePudding user response：
Not sure if this is the best solution or not, but setting a max-height for my navbar does solve the issue.
CodePudding user response：
Just set the height for nav
nav{
height:60px;
}
nav{
height:60px;}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>