How to Target All Font Awesome Icons and Align Them Center

Font Awesome is one of the most popular icon libraries used in web development. Whether you’re using icons for buttons, navigation, social media, or decorative UI elements, it’s important to align them properly—especially if you’re using them inside buttons, cards, or flex/grid layouts.

In this blog post, you’ll learn how to target all Font Awesome icons and center-align them using clean CSS techniques that work across layouts and screen sizes.

---

🎯 The Goal

We want to:

• Select all Font Awesome icons in the document.
• Align them to the center both vertically and horizontally.
• Apply consistent styling regardless of where they appear.

---

✅ Step 1: Target All Font Awesome Icons

Font Awesome icons typically use the .fa, .fas, .fab, or similar classes depending on the style (solid, brand, etc.).

Generic Selector:

[class^="fa"], [class*=" fa-"] {
  /* Styles go here */
}

This CSS rule targets any class that starts with fa or contains fa-, which includes all Font Awesome icons.

Alternatively, if you’re using Font Awesome 5+, you can target all icons with:

.fa, .fas, .far, .fal, .fab {
  /* styles */
}

---

✅ Step 2: Center Icons Horizontally

To horizontally center icons inside a container:

Option A: Inline Element Inside Text or Button

Use text-align: center on the parent:

.icon-wrapper {
  text-align: center;
}

<div class="icon-wrapper">
  <i class="fas fa-star"></i>
</div>

Option B: Use Flexbox for Precision

.icon-wrapper {
  display: flex;
  justify-content: center; /* Horizontal */
}

---

✅ Step 3: Center Icons Vertically and Horizontally

If you want to perfectly center the icon in a container (e.g., inside a circle or card), use Flexbox:

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
}

Example:

<div class="icon-wrapper bg-gray-100 rounded-full">
  <i class="fas fa-user fa-2x"></i>
</div>

This centers the icon both vertically and horizontally, regardless of container size.

---

✅ Bonus: Add Consistent Icon Styling

You can add base styles for all icons:

[class^="fa"], [class*=" fa-"] {
  color: #333;
  font-size: 24px;
  vertical-align: middle;
}

Use vertical-align: middle when icons are placed inline with text for better alignment.

---

📱 Responsive Tips

• Use font-size with em or % units for scalability.
• Use Tailwind CSS or utility-first frameworks for even faster icon alignment.
• Wrap icons in a flex/grid container when possible for clean layout control.

---

📝 Conclusion

Centering Font Awesome icons is straightforward once you understand the structure and layout context. By combining generic selectors with flexbox or text alignment, you can ensure your icons are beautifully aligned across your site.

🔑 Key Takeaways:

Task	CSS Tool
Target all icons	[class^="fa"], [class*=" fa-"]
Horizontal center	text-align: center or justify-content: center
Vertical center	align-items: center
Full centering	display: flex on wrapper
Inline alignment	vertical-align: middle