if i think what you want this is the css tutorial
add to css
/* Primary Menu */
.ipsNavBar_primary > ul > li > a:before,
.ipsNavBar_secondary > li > a:before{
content: "\f00b";
font-family: "FontAwesome";
font-size: 10px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
margin-right: 3px;
opacity: 0.6;
line-height: 1;
}
/* The User menu and Create */
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
content: "\f02b";
font-family: "FontAwesome";
font-size: 14px;
font-weight: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: -2px;
line-height: 1;
}
#elUserLink_menu a[href*="admin"] i{
display: none;
}
#elUserLink_menu a:before,
#elCreateNew_menu a:before{
display: inline-block;
width: 22px;
opacity: 0.7;
}
#elUserLink_menu a:hover:before,
#elCreateNew_menu a:hover:before{
opacity: 1;
}
/* Add Icon on the primary navigation bar */
.ipsNavBar_primary > ul > li[data-FontAwesome='Browse'] > a:before{ content: "\f005" }
.ipsNavBar_primary > ul > li[data-FontAwesome='club'] > a:before{ content: "\f1b3" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Staff'] > a:before{ content: "\f007" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Users Online'] > a:before{ content: "\f0c0" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Activity'] > a:before{ content: "\f0ac" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_primary > ul > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
/* Add Icon on the secondary navigation bar */
.ipsNavBar_secondary > li[data-FontAwesome='Browse'] > a:before{ content: "\f00b" }
.ipsNavBar_secondary > li[data-FontAwesome='club'] > a:before{ content: "\f1b3" }
.ipsNavBar_secondary > li[data-FontAwesome='Support'] > a:before{ content: "\f1cd" }
.ipsNavBar_secondary > li[data-FontAwesome='Forums'] > a:before{ content: "\f086" }
.ipsNavBar_secondary > li[data-FontAwesome='Gallery'] > a:before{ content: "\f030" }
.ipsNavBar_secondary > li[data-FontAwesome='Downloads'] > a:before{ content: "\f019" }
.ipsNavBar_secondary > li[data-FontAwesome='Articles'] > a:before{ content: "\f15c" }
.ipsNavBar_secondary > li[data-FontAwesome='Blogs'] > a:before{ content: "\f02d" }
.ipsNavBar_secondary > li[data-FontAwesome='Calendar'] > a:before{ content: "\f073" }
.ipsNavBar_secondary > li[data-FontAwesome='Chat'] > a:before{ content: "\f27a" }
.ipsNavBar_secondary > li[data-FontAwesome='Online Users'] > a:before{ content: "\f0c0" }
.ipsNavBar_secondary > li[data-FontAwesome='Activity'] > a:before{ content: "\f0ac" }
.ipsNavBar_secondary > li[data-FontAwesome='Search'] > a:before{ content: "\f002" }
.ipsNavBar_secondary > li[data-FontAwesome='Todays Activities'] > a:before{ content: "\f06e" }
.ipsNavBar_secondary > li[data-FontAwesome='My Searches'] > a:before{ content: "\f00e" }
.ipsNavBar_secondary > li[data-FontAwesome='Unread Content'] > a:before{ content: "\f111" }
.ipsNavBar_secondary > li[data-FontAwesome='My Created Content'] > a:before{ content: "\f005" }
.ipsNavBar_secondary > li[data-FontAwesome='Guidelines'] > a:before{ content: "\f0e3" }
.ipsNavBar_secondary > li[data-FontAwesome='Tutorials'] > a:before{ content: "\f19d" }
.ipsNavBar_secondary > li[data-FontAwesome='Staff'] > a:before{ content: "\f132" }
/* Add Icon on the user bar */
/* Profile */
#elUserLink_menu > li[data-menuItem='profile'] > a:before{ content: "\f007" }
/* Attachments */
#elUserLink_menu > li[data-menuItem='attachments'] > a:before{ content: "\f0c6" }
/* Followed Content */
#elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before{ content: "\f1d8" }
/* Administrator Panel */
#elUserLink_menu > li[data-menuItem='content'] > a:before{ content: "\f03a" }
/* Account Configurations */
#elUserLink_menu > li[data-menuItem='settings'] > a:before{ content: "\f013" }
/* Mod Panel */
#elUserLink_menu > li[data-menuItem='modcp'] > a:before{ content: "\f132" }
/* Admin Panel */
#elUserLink_menu > li[data-menuItem='admincp'] > a:before{ content: "\f023" }
/* Logout */
#elUserLink_menu > li[data-menuItem='signout'] > a:before{ content: "\f08b" }
/* Clients */
#elUserLink_menu a[href*="/clients/"]:before{ content: "\f07a" }
/* Edit */
#elUserLink_menu > li[data-menuItem='edit'] > a:before{ content: "\f040" }
/* Ignored Users */
#elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before{ content: "\f235" }
/* Options */
#elUserLink_menu > li[data-menuItem='options'] > a:before{ content: "\f0ac" }
/* Messages */
#elUserLink_menu > li[data-menuItem='messages'] > a:before{ content: "\f01c" }
/* Add Icon on create bar */
/* Default icon that is displayed if you do not add */
#elCreateNew_menu a:before{ content: "\f0fe" }
/* Announcement */
#elCreateNew_menu a[href*="/announcements/"]:before{ content: "\f0a1" }
add to navbar items
<li {{if $item->active()}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">