Not sure why you are having troubles – maybe you have not configured the path to the Font Awasome CSS file. I just tried including it like this on the page:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
And then adding icons like this:
<li><a href="#"><i class="fa fa-camera-retro"></i> Link</a></li>
works without any problems.
How can I easily hide some menu items on mobile devices, an equivalent of class=”navbar-brand hidden-xs”
You can use the same class:
<li class="hidden-xs"><a href="#">Link</a></li>