Docs: Icons and text misalignment in multiple documentation chapters

[aojunhao123]

What is the documentation issue?

I noticed that the icons in several chapters of the Next.js documentation are not properly aligned with the corresponding text, leading to visual inconsistency. Specifically, the issue appears in multiple chapters including but not limited to:

• Chapter 15: Adding Authentication
• Other chapters with similar overview sections(Chapter 6/11/12/14/15/16).

Is there any context that might help us understand?

Environment: Browser: Arc Chromium version: 129.0.6668.90 Device: Mac

Screenshot:

Does the docs page already exist? Please link to it.

https://nextjs.org/learn/dashboard-app/adding-authentication

[aojunhao123]

Possible Fix: • Adjust the CSS to ensure that the icons and text are vertically centered. • Use flexbox or vertical-align properties to better align the text relative to the icons. • Alternatively, reduce the icon size or apply a consistent height to the icon container that ensures proper alignment with the text.

If needed,I am willing to assist in resolving this issue.

[icyJoseph]

The SVG that's misaligned, N (next.js), has display: inline as its computed display value, it should've been display: block (with all of the !important stuff too I guess).

The reset to initial with important is what's making things a bit funky. And that is coming from the geist library, when it hides stuff for light screens, IIRC.

You should go to, https://github.com/vercel/next-learn, and report the issue there, as the README there states:

The course curriculum is currently not open sourced, but you can create an issue if you find a mistake.

[aojunhao123]

The SVG that's misaligned, N (next.js), has display: inline as its computed display value, it should've been display: block (with all of the !important stuff too I guess).未对齐的 SVG，N（next.js），其计算得出的显示值为 display: inline ，本应是 display: block （我猜还有所有的“!important”内容）。

The reset to initial with important is what's making things a bit funky. And that is coming from the geist library, when it hides stuff for light screens, IIRC.将 initial 重置为重要的内容导致情况有点奇怪。如果我没记错的话，这是来自 geist 库，当它为浅色屏幕隐藏内容时。

You should go to, https://github.com/vercel/next-learn, and report the issue there, as the README there states:您应该前往 https://github.com/vercel/next-learn 并在那里报告问题，正如那里的 README 所述：

The course curriculum is currently not open sourced, but you can create an issue if you find a mistake.该课程大纲目前未开源，但如果您发现错误，可以创建一个问题。

thanks!