Toggle font awesome class on button click

I have the code as here in this jsfiddle, I want the font awesome icon to change on button click using javascript, but it does'nt seem to work. I'm new to javascript so please forgive me if this was a dumb question.

HTML

<button id="favBtn" onclick="fav();">
    <i id="favIcon" class="fa fa-star-o"></i>&nbsp;Favourite
</button>

Javascript

function fav() {
    document.getElementById("favIcon").toggleClass('fa-star-o fa-star');
}