Start from scratch and use FontAwesome icons in your project
Add the following code to <head> to use FontAwesome 5's 1,500+ icons. v5 introduces multi-style support (Solid/Regular/Brands) for the first time, with one line of CDN code completing integration.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"><link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/5.15.4/css/all.min.css">Add FontAwesome 5 as an npm dependency to your project:
npm install @fortawesome/[email protected]In Webpack or Vite projects, you can import directly in JavaScript/TypeScript after installation.
FontAwesome 5 uses fas/far/fab prefix (early v5 versions), icon names differ significantly from v4:
<i class="fas fa-home"></i>
<i class="far fa-user"></i>
<i class="fab fa-github"></i><i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-heart" style="color:red"></i>Learn the complete FontAwesome workflow and code examples through practical project cases.
View TutorialQuick reference for class names, sizes, animations, prefixes, and common usage.
View Cheat Sheet