Шрифт Awesome и Bootstrap 4 Navbar

Question

Я ищу пример использования Fontawesome и компонентов Navbar Bootstrap 4, чтобы у меня было текстовое описание и значок рядом друг с другом.

Answer 1

Ну, см. Bootstrap 4 - Glyphicons migration? в первую очередь. Вы также можете просто загрузить CSS шрифта Awesoms' из CDN:

Ссылка в навигационной панели только „нормальный“ якорь (a), так что вы можете добавить значок в них:

<a class="nav-link" href="#"> 
Features<i class="fa fa-bell-o"></i></a> 

Пример:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<nav class="navbar navbar-light bg-faded"> 
 
    <a class="navbar-brand" href="#"><i class="fa fa-stack-overflow"></i>Navbar</a> 
 
    <ul class="nav navbar-nav"> 
 
    <li class="nav-item active"> 
 
     <a class="nav-link" href="#"><i class="fa fa-home"></i> 
 
Home <span class="sr-only">(current)</span></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#"> 
 
Features<i class="fa fa-bell-o"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#"><i class="fa fa-btc"></i> 
 
Pricing</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#"><i class="fa fa-user-plus"></i> 
 
About</a> 
 
    </li> 
 
    </ul> 
 
    <form class="form-inline pull-xs-right"> 
 
    <input class="form-control" type="text" placeholder="Search"> 
 
    <button class="btn btn-success-outline" type="submit"><i class="fa fa-search"></i> 
 
Search</button> 
 
    </form> 
 
</nav>

Чтобы добавить значок поиска в placeholder в форме поиска, см : Use Font Awesome Icon in Placeholder