Font Awesome 4.0 Circles

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<nav class="nav-menu">
            <ul class="nav-list shadow">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <button class="nav-toogle shadow"><i class="fa fa-chevron-circle-up fa-3x" alt="Menu Arrow"></i>
            </button>
        </nav>

CSS

body {
    margin: 10px;
}

JavaScript

$(document).ready(function(){
    $('.nav-toogle').click(function(){
        $(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
        $('.nav-list').slideToggle('slow');    
    }); 
});