Start from scratch and use FontAwesome icons in your project
Add FontAwesome 7 CDN stylesheet link to <head> for quick integration. CDN requires no build tools, open the browser to preview effects, making it the fastest way to experience the latest icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/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/7.3.0/css/all.min.css">Recommended: install FontAwesome 7 via npm for version management and upgrades:
npm install @fortawesome/[email protected]In Webpack or Vite projects, you can import directly in JavaScript/TypeScript after installation.
v7 continues v6 class naming with fa-solid/fa-regular/fa-brands prefix:
<i class="fa-solid fa-home"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-brands fa-github"></i><i class="fa-solid fa-camera fa-lg"></i>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-camera fa-3x"></i>
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid 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