In navbar glyphicon is not showing properly(Bootstrap)

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>