对齐不同大小的图标(字体太棒了)

Question

我正在使用字体可怕的添加图标旁边我的文字链接。我的问题是，间隔是关闭的，因为图标是不同的大小。

引导程序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“类，因为它所做的就是把所有的东西都移到这个大小。

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

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

​

Answer 2

可以在固定宽度的情况下使用fa-fw。更多信息请查看此链接。这里是工作代码。

Answer 3

如果使用Bootstrapt 4，则可以使用flex行为类来获取详细信息https://getbootstrap.com/docs/4.3/utilities/flex/。

您可以添加图标和文本容器的类d对齐项或对齐自引导4类。

如果你对display: flex没有太多的信息，到这里来，这对你的问题很有帮助。