html - 在文本旁边对齐 Font Awesome 图标

Question

如何使图标看起来整洁？我的代码粘贴在下面。看起来像 this 但我希望它看起来像 this

我试着把它放在表格中，然后与每个 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> sample-email@gmail.com</p>
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Answer 1

您可以使用 Font Awesome Fixed Width Icons (fa-fw) 或 List Icons (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> sample-email@gmail.com</p>
<p><span class="fa fa-phone fa-fw"></span> +12 34567890</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> sample-email@gmail.com</li>
  <li><span class="fa fa-phone fa-li"></span> +12 34567890</li>
</ul>