Fontawesome Icons take different widths

Question

I'm using Tailwind CSS along with Font Awesome Icons. Here the icons show like this,

Is it not suitable to adjust every div's width. Here is my code (For an element),

<!-- Navigation Link-->
        <div class="w-100 p-3 hover:bg-white/30">
          <div class="flex gap-4 text-white-max pl-3">
            <div>
              <i class="fas fa-tags"></i>
            </div>
            <div>Products</div>
          </div>
        </div>
<!-- End Navigation Link-->

My question is how to adjust this without changing every single element.

Add class `fa-fw` to each icon -- this is a built in FontAwesome class to make icons fixed-width — Simp4Code, Jul 13 '22 at 16:59
This is happening because the icons and the text are in a flex container. The text is only giving the icons exactly the amount of space that they need, adding a set width to the icons containing div will be the best way to make them take an equal amount of space and have your text line up perfectly. — JDawwgy, Jul 13 '22 at 16:59

dippas · Answer 1 · 2022-07-13T17:08:54.100

Add fa-fw class to the icon, see more info about Fixed Width Icons

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width.

console.clear()

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="w-100 p-3 hover:bg-white/30">
  <div class="flex gap-4 text-white-max pl-3">
    <div>
      <i class="fas fa-tags fa-fw"></i>
    </div>
    <div>Products</div>
  </div>
  <div class="flex gap-4 text-white-max pl-3">
    <div>
      <i class="fa-brands fa-fw fa-windows"></i>
    </div>
    <div>Dashboard</div>
  </div>
</div>

Simp4Code · Answer 2 · 2022-07-13T17:51:59.237

FontAwesome has a class for this fa-fw which will make an icon square, this is applied to each icon along with the variant and name class, so like fa-solid fa-fw fa-file-lines for example

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

<div class="text-white bg-stone-900 inline-flex flex-col" style="--fa-animation-duration: 1.5s; --fa-animation-iteration-count: 3; --fa-animation-timing: ease-in-out">
  <div class="cursor-pointer p-3 hover:bg-white/30">
    <div class="flex items-center gap-3 px-3">
      <i class="fa-brands fa-fw fa-windows fa-beat"></i>
      Dashboard
    </div>
  </div>
  <div class="cursor-pointer p-3 hover:bg-white/30">
    <div class="flex items-center gap-3 px-3">
      <i class="fa-solid fa-fw fa-file-lines fa-beat"></i>
      Documents
    </div>
  </div>
  <div class="cursor-pointer p-3 hover:bg-white/30">
    <div class="flex items-center gap-3 px-3">
      <i class="fa-solid fa-fw fa-tags fa-beat"></i>
      Products
    </div>
  </div>
  <div class="cursor-pointer p-3 hover:bg-white/30">
    <div class="flex items-center gap-3 px-3">
      <i class="fa-solid fa-fw fa-cube fa-beat"></i>
      Stock
    </div>
  </div>
</div>

score -4 · Answer 3 · answered Jul 13 '22 at 17:20

<script src="https://cdn.tailwindcss.com"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="w-100 p-3 hover:bg-white/30">
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-brands fa-fw fa-windows"></i>
    </div>
    <div>Dashboard</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-file-lines"></i>
    </div>
    <div>Documents</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-tags"></i>
    </div>
    <div>Products</div>
  </div>
  <div class="flex gap-3 text-white-max pl-3">
    <div>
      <i class="fa-solid fa-fw fa-cube"></i>
    </div>
    <div>Stock</div>
  </div>
</div>

Fontawesome Icons take different widths

3 Answers3