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

Question

我正在使用很棒的字体在我的文本链接旁边添加图标。我的问题是间距不对，因为图标大小不同。

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" class 因为它所做的只是将所有内容都移动到大小。

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

Answer 1

您应该使用 ul 并添加 fontawesome 提供的 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 固定宽度。更多信息请查看此 link。 Here 是工作代码。

Answer 3

如果您使用的是 Bootstrapt 4。您可以使用 flex 行为 classes，了解详情 https://getbootstrap.com/docs/4.3/utilities/flex/

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

如果您对 display: flex 的了解不多，visit here 这对您的问题很有帮助。

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

Align different sized icons with each other (font awesome)

html

css

twitter-bootstrap

font-awesome