I've encountered an issue while using linearicons - I'm trying to align the icon vertically with the text on my navbar, but it's not working as expected. The icon doesn't seem to be positioned correctly at the top of the navbar, causing a misalignment. Here's an image illustrating the problem:
https://i.sstatic.net/X7aLY.png
My goal is to align the icon vertically with the text and ensure that the entire menu is aligned with the navbar. I hope this explanation clarifies the issue for you.
Here's the HTML:
<div class="navbar navbar-default top-bar">
<div class="container">
<div class="infos pull-right">
<span class="lnr lnr-clock infos-icons"></span>
<p class="infos-text">Mon-Fri: 08:00 - 12:00</p>
<span class="divider-vertical"></span>
<span class="lnr lnr-envelope infos-icons"></span>
<p class="infos-text">mail.example.com</p>
<span class="divider-vertical"></span>
<span class="lnr lnr-phone infos-icons"></span>
<p class="infos-text">(880)123-456-7890</p>
</div>
</div>
</div>
Below is the CSS code I have been using to try and resolve this alignment issue:
.top-bar {
margin-bottom: 0;
border: none;
background-color: #9E87FF;
color: #fff;
height: 50px;
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
.infos-text {
display: inline-block;
}
.infos .infos-icons {
padding-right: 10px;
font-size: 20px;
vertical-align: middle;
display: inline-block;
}