How to target all Font Awesome icons and align them center?

Font Awesome is one of the most popular icon libraries for web development. Whether you’re building buttons, menus, or dashboards, Font Awesome makes it easy to add scalable, responsive icons to your UI.

Sometimes, you may want to target all Font Awesome icons on a page and align them to the center — either within their containers or inline with text. In this guide, we’ll show you how to do just that using both CSS and Tailwind CSS.

Table of Contents

✅ Step 1: Identify Font Awesome Icons in Your HTML

Font Awesome icons are usually added with <i> or <span> tags using a specific class pattern, such as:

<i class="fas fa-user"></i>

The class names begin with:

fas (solid)
far (regular)
fab (brand)
fa-* (specific icon name)

So, all icons have at least the fa class.

✅ Step 2: Use CSS to Target All Font Awesome Icons

If you want to select and align all icons, you can use a CSS selector that targets [class*="fa"], which matches any class that contains fa.

🔧 Example CSS:

[class*="fa"] {
  display: block;
  text-align: center;
  margin: auto;
}

🧠 What This Does:

display: block: Makes the icon a block element.
text-align: center: Ensures any inline content inside is centered.
margin: auto: Horizontally centers the block within its container.

💡 Tip: You can also be more specific with .fa or .fas, .fab, etc., if needed:

.fa, .fas, .far, .fab {
  display: block;
  text-align: center;
  margin: auto;
}

✅ Step 3: Align Icons Inside a Container

If you want to center icons inside a div, button, or other container, wrap them and apply flexbox:

🔧 HTML:

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

🔧 CSS:

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

✅ This vertically and horizontally centers the icon inside the wrapper.

✅ Using Tailwind CSS

If you’re using Tailwind CSS, you can quickly center all icons like this:

<div class="flex justify-center items-center h-24 w-24">
  <i class="fas fa-check text-2xl text-green-600"></i>
</div>

💡 Tailwind Classes Explained:

flex: Enables flexbox.
justify-center: Centers horizontally.
items-center: Centers vertically.
h-24 w-24: Sets height and width of the icon container.

✅ Center All Icons on the Page (Global Approach)

To apply a global rule using Tailwind (if you’re customizing via Tailwind config or adding custom CSS):

.fa {
  @apply block mx-auto text-center;
}

Or in a traditional CSS file:

.fa, .fas, .far, .fab {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

✅ Summary

To target and center all Font Awesome icons:

Method	Description
CSS `[class*="fa"]`	Targets all icons with `fa` in class name
Flexbox	Centers icon inside container both ways
Tailwind CSS	Use `flex`, `justify-center`, `items-center`
Custom Global Rule	Use `.fa` class to apply alignment globally