将不同大小的图标相互对齐（字体真棒）答案

【问题标题】：Align different sized icons with each other (font awesome)将不同大小的图标相互对齐（字体真棒）
【发布时间】：2020-03-11 04:54:13
【问题描述】：

我正在使用 font awesome 来在我的文本链接旁边添加图标。我的问题是间距关闭，因为图标大小不同。

Bootstrap 4 也在使用中

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

我不能做“pr”类，因为它所做的只是将所有内容移动到大小。

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

【问题讨论】：

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

您应该使用 ul 并添加由 fontawsome 提供的fa-ul 来制作图标列表。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

【讨论】：

有时你不想使用 ul。另一种选择是添加 fa-fw 类，如此处其他解决方案中所述。

【解决方案2】：

您可以将fa-fw 用于固定宽度。更多信息请查看link。 Here 是工作代码。

【讨论】：

这是最简单最优雅的解决方案。如果我要使用上面的 ul，我必须重构我的所有菜单。我所要做的就是为每个图标添加一个类。

【解决方案3】：

如果你使用的是 Bootstrap 4。你可以使用弹性行为类，详情https://getbootstrap.com/docs/4.3/utilities/flex/

您可以添加图标和文本容器的类 d-flex align-items 或 align-self Bootstrap 4 类。

如果您没有太多关于 display: flex 、 visit here 的信息，这对您的问题很有帮助。

【讨论】：