In navbar glyphicon is not showing properly(Bootstrap) - html

Question

I am trying to create a navbar using bootstrap.But the home icon in navbar is not showing properly.It is not in middle and not in parallel with other list.Please help me to solve this.
Problem:
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;
}

Answer 1

You can apply any changes to the CSS rule below:
.navbar-inverse .navbar-brand .glyphicon{
padding: 5px 0 0 15px;
}
.navbar {
border-radius: 0;
}
.navbar-inverse .navbar-header .navbar-brand {
color: #FFFFFF;
}
.navbar-inverse .navbar-nav > li:first-child {
border: none;
padding-top: 10px;
}
.navbar-inverse .navbar-nav {
border-left: 1px solid #545454;
}
.navbar-inverse .navbar-nav > li {
border: none;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
}
.navbar-inverse ul.navbar-nav > li > a {
color: #FFFFFF;
}
small {
color: #C5C6C1;
font-style: italic;
}
#media (min-width: 1200px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-inverse .navbar-header a {
display: none;
}
}
#media (max-width: 1200px) {
.navbar-inverse .navbar-nav > li:first-child {
display: none;
}
.navbar-inverse .navbar-nav {
border: none;
}
.navbar-inverse .navbar-brand {
line-height: 0;
}
.navbar-inverse .navbar-nav > li {
border: none;
}
.navbar-inverse .navbar-header {
float: none;
}
.navbar-inverse .navbar-left,
.navbar-right {
float: none !important;
}
.navbar-inverse .navbar-toggle {
display: block;
}
.navbar-inverse .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-inverse .navbar-collapse.collapse {
display: none !important;
}
.navbar-inverse .navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-inverse .navbar-nav > li {
float: none;
}
.navbar-inverse .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-inverse .collapse.in {
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a href="#"><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>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>