I have an anchor tag with two children: A fontawesome Icon and a span. The span isn’t displayed, until you hover over the anchor.
The issue is that on my website, when the span gets displayed using inline, the parent anchor grows in height. This happens regardless of how big the text is, even when I lower the font-size or line-height of the span.
I’ve tried isolating the code for the question, but can’t replicate the issue. Here it is regardless:
:root {
--darkblack: #000615;
--black: #0B1721;
--lightblack: #141B37;
--yellow: #F7C921;
--darkyellow: #a28b2a;
--cyan: #21B7FF;
--darkcyan: #1c7eaf;
--magenta: #FF217D;
--darkmagenta: #531a3b;
}
.nav {
align-items: flex-end;
}
.nav-pills .nav-link {
width: fit-content;
}
.nav-pills .nav-link.active {
color: var(--black) !important;
background-color: var(--cyan);
}
.nav-pills .nav-link:not(.nav-link.active) {
color: var(--cyan) !important;
cursor: pointer;
}
.nav-pills .nav-link:hover > .nav-title {
display: inline !important;
}<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/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<row class="row">
<column class="col-10">
</column>
<column class="col-2">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<i class="fa-solid fa-book"></i>
<span class="d-none nav-title">Test</span>
</a>
</li>
<li>
<a class="nav-link" data-id="tags">
<i class="fa-solid fa-tags"></i>
<title class="d-none nav-title">Tags</title>
</a>
</li>
</ul>
</column>
</row>I tried going through every single CSS rule for both the span, icon and text to see if disabling any would fix the issue, however the only rule that did was
.fa-classic, .fa-regular, .fa-solid, .far, .fas {
font-family: "Font Awesome 6 Free";
}
which it gets from the FontAwesome library, and also I can’t just replace due to removing it breaking the icon. I can’t really seem to find out what could cause this issue. Does anyone have a clue?
Here’s a visual of the issue on my site:
