Quick Tip: Use an Icon with Responsive-Nav.js an Icon Font

Responsive Nav is a really nifty (and light-weight) Javascript plugin that will allow you to easily create an off-canvas navigation menu that slides down from off the screen. Here’s a quick and easy way to use an icon instead of your run of the mill plain text.

In the examples for integrating Responsive Nav into your site, you’ll find several implementations of the clickable area used to reveal the menu (called the label) including the word, “Menu” and the common menu icon (commonly known as the ‘Hamburger’ icon). However, the latter requires some extra CSS and finagling to make it work. That’s not to say it’s hard, but it could be much easier with an icon font like Font Awesome.

Simply include the Font Awesome stylesheet on your site:

Then configure responsive-nav.js using the instructions here. Once you’re ready to call the script in your webpage (right before the </body> tag, as recommended), you can use this:

This will replace the default label (‘Menu’) with some markup to call the icon below, giving you a implementation with no hassle.