I've been looking at how to change the button icon which is shown across Bootstrap 3 navigation menus in a mobile viewport.

For months I've come across a whole variety of clever Navicon icons which change when clicked upon.

I wanted to implement this feature into a Bootstrap navigation menu. In the end, I used a couple small lines of code which use jQuery.

The code toggles between two CSS classes. The toggle is activated when the menu button is pressed.

As I am using FontAwesome icons, this uses class names. Therefore toggling between two CSS classes will change the FontAwesome icons which are used in the menu.

I've embedded two Github Gists below which show the Javascript code and the markup of my Bootstrap menu.