Navbar Collapse button are not working

Question

You can see the picture above. I don't know the reason why its not working. Im noob to css,html and also to bootstrap. Anyone can give me some ideas how to fix this? Thanks in advance.

Here is my html code.

     <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button>
            <img class="img-responsive" src="images/brandz.png" >
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Students</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                     <img src="images/logo.png" class="logo">
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>

here is my css code.

 .navbar-default .navbar-nav > li > a {
font-weight: 300;
color: #949494;
display: block;
padding: 3px 20px 5px 60px;
border-bottom: 3px solid transparent;
line-height: 97px;
-webkit-transition: all .4s ease-in-out 0s;
-moz-transition: all .4s ease-in-out 0s;
transition: all .4s ease-in-out 0s;

 }
 .navbar-default{
 background-color:#fff;

 }
 .nav>li>a {
  position: relative;
 }
.navbar-default .navbar-right > li > a {
padding-left: 70px;
padding-right: 1px;
}
.glyphicon-log-in{

}

Answer 1

1) include FontAwesome on my header

http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css

2) added

<i class="fa fa-bars"></i>

to

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button>

example:

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"><i class="fa fa-bars"></i></button>