I'm working on building a navigation bar using Bootstrap, but I'm facing an issue with the home icon not displaying correctly. It's not aligned properly and doesn't flow seamlessly with the rest of the list items. Can someone please assist me in resolving this? https://i.sstatic.net/7wuqo.jpg Problem: https://i.sstatic.net/r3XHY.png HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="row">
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand text-center">
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="active">
<a href="#">Avro keyboard<br/>
<small>For windows</small>
</a>
</li>
<li>
<a href="#">iAvro<br/>
<small>For Mac OS X</small>
</a>
</li>
<li>
<a href="#">ibus-avro<br/>
<small>for linux</small>
</a>
</li>
<li>
<a href="#">Bangla Fonts<br/>
<small>Unicode/ANSI fonts</small>
</a>
</li>
<li>
<a href="#">Others<br/>
<small>Misc goodies</small>
</a>
</li>
<li>
<a href="#">Blog<br/>
<small>Stay updated!</small>
</a>
</li>
<li>
<a href="#">Help and support<br/>
<small>Forum & Help files</small>
</a>
</li>
<li>
<a href="#">Developers<br/>
<small>repositories and resources</small>
</a>
</li>
</ul>
</nav>
</div>
</div>
</nav>
CSS:
li {
border-left: 1px solid;
border-top: 0px;
border-right: 1px solid;
border-bottom: 0px;
border-style: solid;
border-color: #545454;
}
a {
color: #FFFFFF !important;
}
small {
color: #C5C6C1;
font-style: italic;
}