Bootstrap 5 Breadcrumbs with FontAwesome Icons

Submit By webmaster 2 years ago in bootstrap category
Tags: navigationbreadcrumb
Bootstrap 5 Breadcrumbs with FontAwesome Icons. You can add any font Awesome icon in the breadcrumb. you just need to update the content value in the CSS. There are three examples in this code, you can add more as per your design.
Preview HTML CSS JavaScript Resources
<h1 class="h2 mt-3 py-3 px-3">Bootstrap 5 Breadcrumbs with FontAwesome Icons</h1> <div class="bg-light mb-5 py-3"> <div class="container"> <div class="row"> <div class="col-12"> <nav class="breadcrumb-wrapper breadcrumb-icon-1" aria-label="breadcrumb"> <ol class="breadcrumb mb-0"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Examples</a></li> <li class="breadcrumb-item"><a href="#">Snippets</a></li> <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li> </ol> </nav> </div> </div> </div> </div> <div class="bg-light mb-5 py-3"> <div class="container"> <div class="row"> <div class="col-12"> <nav class="breadcrumb-wrapper breadcrumb-icon-2" aria-label="breadcrumb"> <ol class="breadcrumb mb-0"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Examples</a></li> <li class="breadcrumb-item"><a href="#">Snippets</a></li> <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li> </ol> </nav> </div> </div> </div> </div> <div class="bg-light mb-5 py-3"> <div class="container"> <div class="row"> <div class="col-12"> <nav class="breadcrumb-wrapper breadcrumb-icon-3" aria-label="breadcrumb"> <ol class="breadcrumb mb-0"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Examples</a></li> <li class="breadcrumb-item"><a href="#">Snippets</a></li> <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li> </ol> </nav> </div> </div> </div> </div>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); body { font-family: 'Sen', sans-serif; background: #e3f2fd; } /* Common style */ .breadcrumb-item+.breadcrumb-item:before{ font-family: "Font Awesome 5 Free"; font-weight: 900; } .breadcrumb-icon-1 .breadcrumb-item+.breadcrumb-item:before{ content: "\f101"; } .breadcrumb-icon-2 .breadcrumb-item+.breadcrumb-item:before{ content: "\f58e"; } .breadcrumb-icon-3 .breadcrumb-item+.breadcrumb-item:before{ content: "\f152"; }
Bootstrap = 5.1.3
FontAwesome = 5.15.4

Download Bootstrap 5 Breadcrumbs with FontAwesome Icons snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with Bootstrap 5 Breadcrumbs with FontAwesome Icons snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet