Fontawesome Icons take different widths - css

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.

Answer 1

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>

Answer 2

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>

Answer 3

<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>