Incorrect display of bootstrap + fontawesome

The page is not displayed correctly after adding icons font awesome

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><i class="fa fa-home"></i><span class="sr-only">(current)</span> главная</a></li> <li><a href="#"><i class="fa fa-comments">&nbsp;форум</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-comments">&nbsp;техноты<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">главная</a></li> <li><a href="#">форум</a></li> <li><a href="#">техноты</a></li> <li><a href="#">новости</a></li> <li><a href="#">встречи</a></li> <li><a href="#">партнеры</a></li> <li><a href="#">контакты</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-file-text-o"></i>&nbsp;новости<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">главная</a></li> <li><a href="#">форум</a></li> <li><a href="#">техноты</a></li> <li><a href="#">новости</a></li> <li><a href="#">встречи</a></li> <li><a href="#">партнеры</a></li> <li><a href="#">контакты</a></li> </ul> </li> <li><a href="#"><i class="fa fa-car"></i>&nbsp;встречи</a></li> <li><a href="#"><i class="fa fa-usd"></i>&nbsp;партнеры</a></li> <li><a href="#"><i class="fa fa-phone"></i>&nbsp;контакты</a></li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> 

Has anyone come across this? Screen: