Html 将不同大小的图标相互对齐（字体）

我正在使用FontAsome在我的文本链接旁边添加图标。我的问题是，由于图标的大小不同，所以间距是关闭的

引导程序4也在使用中

我不能上“公关”课，因为它所做的只是把所有东西都调整到合适的尺寸

---

我只想让图标和文本对齐。

您应该使用ul并添加fontawsome提供的

fa-ul

来制作图标列表

可以列出图标
习惯于
替换子弹
列表中

您可以使用固定宽度的

fa-fw

。更多信息请查看此。

---

是工作代码。

如果您正在使用Bootstrapt 4。您可以使用flex行为类来获取详细信息

您可以添加图标和文本容器的class d-flex align项或align self-Bootstrapt 4类

---

如果您没有太多关于

display:flex

的信息，这将有助于解决您的问题。

这是最简单、最优雅的解决方案。如果我要使用上面的ul，我必须重构我所有的菜单。我在这里要做的就是给每个图标添加一个类。有时候你不想使用ul。另一个选项是添加fa-fw类，如这里的另一个解决方案中所述。

<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
    <span class="dropdown-item"><i class="fas fa-user col-centered pr-3"></i><a href="cards/profile-page.php" class="header-dropdown-links">My Profile</a></span>
    <span class="dropdown-item"><i class="fas fa-file col-centered pr-3  text-center"></i><a href="list-claimed.php" class="header-dropdown-links">My Coupons</a></span>
    <div class="dropdown-divider"></div>
    <span class="dropdown-item"><a href="signout" class="signout">Sign out</a></span>
</div>