CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Maninder Singh
Maninder Singh

Reputation: 485

Customize navbar toggler icon of bootstrap

I'm trying to customize the navbar toggler icon of bootstrap with font-awesome but my code is not working why?I'm using font-awesome CDN.

<span class="navbar-toggler-icon">
     <i class="fas fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

This code is showing just 2 white lines on the hamburger toggle icon of bootstrap.

Upvotes: 4

Views: 11820

Answers (2)

yinsweet
yinsweet

Reputation: 2851

There is no fas fa-navicon in Font Awesome 5. Use fas fa-bars for Font Awesome 5.

You may see the icon reference from w3school link. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<span class="navbar-toggler-icon">
     <i class="fas fa-bars" style="color:#000; font-size:28px;></i>
</span>

Upvotes: -1

davidkonrad
davidkonrad

Reputation: 85518

I assume you are using BS4x. You just need to reset the default SVG background image and specify your desired alternative in CSS:

<span class="navbar-toggler-icon"></span>

.navbar-toggler-icon {
  background-image: none;
}
.navbar-toggler-icon::before {
  font-family: FontAwesome;
  content: "\f0c9"; /* fa-bars, fa-navicon */
}

FontAwesome is for FA < v5, for FA > v5 use 'Font Awesome\ 5 Free' (afaik)

By that you also avoid dirty inline CSS. Simply apply the needed rules such as color and font-size to the .navbar-toggler-icon::before class.

Upvotes: 7

Related Questions