Font Awesome and Bootstrap have gone together since Bootstrap 2. Here's how to add Font Awesome 6 to a Bootstrap 5 project in minutes.
Method 1: CDN (Quickest)
Add this to your <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
That's it. Font Awesome 6 free tier is now available. Test it:
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-brands fa-github"></i>
Method 2: npm
npm install @fortawesome/fontawesome-free
Import in your main CSS or Sass file:
@import "@fortawesome/fontawesome-free/css/all.min.css";
Or import only what you need to reduce bundle size:
@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
@import "@fortawesome/fontawesome-free/css/solid.min.css";
@import "@fortawesome/fontawesome-free/css/brands.min.css";
Using Icons in Bootstrap Components
Buttons:
<button class="btn btn-primary">
<i class="fa-solid fa-download me-2"></i>Download
</button>
<button class="btn btn-danger">
<i class="fa-solid fa-trash me-2"></i>Delete
</button>
<!-- Icon only button -->
<button class="btn btn-outline-secondary" aria-label="Settings">
<i class="fa-solid fa-gear"></i>
</button>
Navbar:
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="/"><i class="fa-solid fa-house me-1"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/templates">
<i class="fa-solid fa-layer-group me-1"></i>Templates
</a>
</li>
</ul>
<div class="d-flex gap-2">
<a href="/search" class="btn btn-sm btn-outline-secondary">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
<a href="/cart" class="btn btn-sm btn-outline-secondary position-relative">
<i class="fa-solid fa-cart-shopping"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
</a>
</div>
Alerts:
<div class="alert alert-success d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check fa-lg"></i>
<span>Your changes have been saved successfully.</span>
</div>
<div class="alert alert-danger d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-xmark fa-lg"></i>
<span>An error occurred. Please try again.</span>
</div>
<div class="alert alert-warning d-flex align-items-center gap-2">
<i class="fa-solid fa-triangle-exclamation fa-lg"></i>
<span>Your subscription expires in 3 days.</span>
</div>
List groups:
<ul class="list-group">
<li class="list-group-item d-flex align-items-center gap-3">
<i class="fa-brands fa-angular text-danger fa-lg" style="width:20px;text-align:center;"></i>
<span>Angular 21 Templates</span>
<span class="badge bg-danger rounded-pill ms-auto">New</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<i class="fa-brands fa-bootstrap text-primary fa-lg" style="width:20px;text-align:center;"></i>
<span>Bootstrap 5 Templates</span>
</li>
<li class="list-group-item d-flex align-items-center gap-3">
<i class="fa-brands fa-react text-info fa-lg" style="width:20px;text-align:center;"></i>
<span>React Templates</span>
</li>
</ul>
Icon Sizing
<!-- Font Awesome size classes -->
<i class="fa-solid fa-star fa-xs"></i> <!-- Extra small -->
<i class="fa-solid fa-star fa-sm"></i> <!-- Small -->
<i class="fa-solid fa-star"></i> <!-- Default -->
<i class="fa-solid fa-star fa-lg"></i> <!-- Large -->
<i class="fa-solid fa-star fa-xl"></i> <!-- Extra large -->
<i class="fa-solid fa-star fa-2xl"></i> <!-- 2x large -->
<i class="fa-solid fa-star fa-2x"></i> <!-- 2em -->
<i class="fa-solid fa-star fa-3x"></i> <!-- 3em -->
<!-- Or use Bootstrap fs utilities -->
<i class="fa-solid fa-star fs-1"></i> <!-- Bootstrap fs-1 ~2.5rem -->
<i class="fa-solid fa-star fs-4"></i> <!-- Bootstrap fs-4 ~1.5rem -->
<i class="fa-solid fa-star fs-6"></i> <!-- Bootstrap fs-6 ~1rem -->
Font Awesome vs Bootstrap Icons
Quick comparison if you're deciding:
| Font Awesome Free | Bootstrap Icons | |
|---|---|---|
| Icon count | ~2,000 | 2,000+ |
| Brand icons | ✅ Good | Limited |
| Cost | Free tier | 100% free |
| Maintained by | Fonticons Inc | Bootstrap team |
| Integration with Bootstrap | Good | Perfect |
My honest take: use Bootstrap Icons unless you specifically need brand icons (GitHub, Twitter, etc.) that Bootstrap Icons doesn't have. Bootstrap Icons is completely free, maintained by the same team, and designed to look consistent with Bootstrap components.
Frequently Asked Questions
Bootstrap Icons is the better default choice for Bootstrap 5 projects — it's maintained by the Bootstrap team, designed to match Bootstrap's style and is completely free. Font Awesome has more icons and more brand icons, but the free tier is limited. If you need brand icons (GitHub, Twitter, etc.) Font Awesome free covers more. Otherwise Bootstrap Icons.
Use Font Awesome's size classes: fa-xs, fa-sm, fa-lg, fa-xl, fa-2xl, fa-2x through fa-10x. Or control with Bootstrap's font-size utilities: <i class='fa-solid fa-star fs-4'> uses Bootstrap's fs-4.
Add the icon inside the button tag: <button class='btn btn-primary'><i class='fa-solid fa-download me-2'></i>Download</button>. Use Bootstrap spacing utilities (me-2) for the gap between icon and text.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.