Fontawesome 图标采用不同的宽度

Question

我正在使用 Tailwind CSS 和 Font Awesome Icons。这里的图标显示如下，

是不是不适合调整每个div的宽度。这是我的代码（对于一个元素），

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

我的问题是如何在不改变每个元素的情况下进行调整。

Answer 1

FontAwesome 有一个类，fa-fw它将制作一个图标正方形，这与变体和名称类一起应用于每个图标，fa-solid fa-fw fa-file-lines例如

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

fa-fw为图标添加类，查看有关固定宽度图标的更多信息

在引用图标的 HTML 元素上添加 fa-fw 类，以将一个或多个图标设置为相同的固定宽度。

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>