将Font Awesome图标与文本对齐

Question

我该如何使图标对齐并呈现清晰的外观？我的代码如下，并希望它看起来像这样而不是这样。

我尝试将其放在表格中，然后每个td左对齐，但是图标被移动到了下方。有没有可能解决这个问题？谢谢。

<p class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</p>
<p class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</p>
<p class="for-font-size"><span class="fa fa-venus-mars"></span> Male</p>
<p class="for-font-size"><span class="fa fa-envelope"></span> [e-mail]</p>
<p class="for-font-size"><span class="fa fa-phone"></span> [phone]</p>

- Ralph

---

请提供 CSS 代码。 - chander shekhar

Answer 1

您可以使用Font Awesome的固定宽度图标（fa-fw）或列表图标（fa-ul + fa-li）。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p><u><code>fa-fw</code> class</u></p>
<p><span class="fa fa-calendar fa-fw"></span> July 25, 2017</p>
<p><span class="fa fa-map-marker fa-fw"></span> Sample City</p>
<p><span class="fa fa-venus-mars fa-fw"></span> Male</p>
<p><span class="fa fa-envelope fa-fw"></span> [e-mail]</p>
<p><span class="fa fa-phone fa-fw"></span> [phone]</p>

<p><u><code>fa-ul</code> + <code>fa-li</code> class</u></p>
<ul class="fa-ul">
  <li><span class="fa fa-calendar fa-li"></span> July 25, 2017</li>
  <li><span class="fa fa-map-marker fa-li"></span> Sample City</li>
  <li><span class="fa fa-venus-mars fa-li"></span> Male</li>
  <li><span class="fa fa-envelope fa-li"></span> [e-mail]</li>
  <li><span class="fa fa-phone fa-li"></span> [phone]</li>
</ul>

- Shiva127

---

非常感谢您！ - Ralph

我可以使用自己的PNG文件中的自定义图标吗？ - calvin sugianto

@calvinsugianto 请在新的SO问题中提出此问题。 - Shiva127

Answer 2

给你的标签添加样式将解决它的问题。

span {
 width: 10px;
 padding-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</p>
<p class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</p>
<p class="for-font-size"><span class="fa fa-venus-mars"></span> Male</p>
<p class="for-font-size"><span class="fa fa-envelope"></span> [e-mail]</p>
<p class="for-font-size"><span class="fa fa-phone"></span> [phone]</p>

- Marcogomesr

Answer 3

使用 <ul> 和 <li> 标签，类似于这样的形式，

<ul>
<li class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</li>
<li class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</li>
<li class="for-font-size"><span class="fa fa-venus-mars"></span> Male</li>
<li class="for-font-size"><span class="fa fa-envelope"></span> [e-mail]</li>
<li class="for-font-size"><span class="fa fa-phone"></span> [phone]</li>
</ul>

如果不需要，也可以移除 class="for-font-size"。

- John

Answer 4

添加这个

.for-font-size .fa {
    width: 15px; (arrording to font-size)
}

- Dhaval Panchal

---

很高兴能帮助 :) - Dhaval Panchal

Answer 5

为什么有那么多人要踩这个呢，太刻薄了吧...

.fa {
  min-width:20px;
  text-align:center;
}

- Alexandr