1. Add a new page to your project.

2. Double click the navigation link title and add one of the following snippets as an example:

Numbered Example: 01.<span>Home</span>

Font Awesome Snippet Example: <i class="icon-home icon-2x"></i><span>Home</span>

(For those with an updated version of Emotion utilizing Font Awesome 4 Snippet Example: <i class="fa fa-home"></i><span>Home</span>

3. Refer to the Font Awesome Icon Page to replace the icon with another.

4. See the figures below for an example of the preview site's menu:

Snapshot of icon font navigation menu:



Snapshot of numbered font navigation:




6. Preview your page and enjoy a user advanced navigation menu

*If you would like to target and increase the size of the numbers placed in the main side navigation, simply add the following snippet to your Custom CSS area found in the page inspector (note: not all size are supported due to the width and styling of the sidebar navigation area):

#nav_main a {
font-size: 15px;
font-family: "Abel";
}