Is there a way to target all Font Awesome icons and align them center?

Question

I'd like to somehow target the class in:

<i class="fas fa-tree fa-4x"></i>

and center the content horizontal

fas {
  align-content: center;
}

I can't figure something out though. Thank you in advance for any suggestions.

This is the context:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 mb-1">
  <i class="fas fa-tree fa-4x"></i>
  <h4 class="my-4" font-weight-bold>The Park</h4>
  <p>Text</p>
</div>

alignment need a reference. Align based on what? we need more context — Temani Afif, May 12 '20 at 13:06
One more thing there is a typo in your code. When you are referencing class in CSS you should add period or dot before the class name. like `.fas { align-content: center; }` — MD M Nauman, May 12 '20 at 13:12

Atul Rajput · Answer 1 · 2020-05-12T13:29:31.177

First way: when you only want to center the icon.

.cutomsClass  {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.fas {
  align-self: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 mb-1 d-flex cutomsClass">
  <i class="fas fa-tree fa-4x"></i>
  <h4 class="my-4" font-weight-bold>The Park</h4>
  <p>Text</p>
</div>

Second way: if you want to center everything along with icon,

.cutomsClass  {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 mb-1 d-flex cutomsClass">
  <i class="fas fa-tree fa-4x"></i>
  <h4 class="my-4" font-weight-bold>The Park</h4>
  <p>Text</p>
</div>

Is there a way to target all Font Awesome icons and align them center?

1 Answers1