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

Question

我一直在尝试复制 Twitter，但在制作侧边栏时我无法对齐“主页”和“探索”的文本。在 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>

我希望主页和探索看起来像这样。

Answer 1

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

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

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

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

Vertical alignment of text in a button with icon is not correct

css

reactjs

frontend

font-awesome

tailwind-css