带有图标的按钮中文本的垂直对齐方式不正确

Posted 2023-02-21

【中文标题】带有图标的按钮中文本的垂直对齐方式不正确

【英文标题】：Vertical alignment of text in a button with icon is not correct

【发布时间】：2021-09-28 20:48:37

【问题描述】：

我一直在尝试制作 twitter 克隆，在制作侧边栏时我无法对齐“Home”和“Explore”的文本。在 img 中，您可以看到“Home”有点偏右。检查时我发现 faHome 图标的大小为 18x14，而 faHashtag 的大小为 14x14。

我需要知道如何使所有按钮的文本和图标保持相同的对齐方式。 遵循完整屏幕的代码，如图所示。我正在使用 Tailwind CSS

 <div className="flex flex-row">

--------- Div for Nav Bar ---------
        <div class="px-4 w-80 bg-white flex flex-col justify-start align-center top-0 bottom-0 left-0 fixed">
          <div>
            <button className="flex p-4 bg-red-500 mb-2 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
              <FontAwesomeIcon icon=faHome className="mr-4 text-xl" />

              <span>Home</span>
            </button>

            <button className="flex p-4 bg-red-500 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
              <FontAwesomeIcon icon=faHashtag className="mr-4 text-xl" />

              <span>Explore</span>
            </button>

            <button className="flex p-4 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
              <FontAwesomeIcon icon=faHashtag size="lg" className="mr-4" />
              <span>Explore</span>
            </button>
          </div>
        </div>

---------------------


        <div className="flex-auto h-screen bg-blue-400">Hello World</div>
        <div className="w-96 h-screen bg-gray-400">Hello World</div>
      </div>

我希望 Home and explore 看起来像这样。

【问题讨论】：

您可以将固定的width 分配给FontAwesomeIcon 元素，或者将其包装到具有固定width 的另一个元素中。在您的情况下，它应该是width: 18px。

@majusebetter 没用

您到底尝试了什么？您可以查看这个使用实际图标包装器的小示例。我通过为img 标签分配不同的width 属性来模拟不同的图标大小。如果你在CSS部分的width: 24px评论，问题应该解决了：jsfiddle.net/aLmspfo4

【参考方案1】：

问题是因为图标大小来自 FontAwesome Icons。虽然我试图将大小包装到一个 div 中，但这没有用。

我发现我们可以使用以下来获得所需的图标大小。

<FontAwesomeIcon  icon=faHome  style= width: "20px", height: "230px"   />