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>

Answer 2

使用span[style*=color]和<span style="border-color: green">标签，如下所示，

<ul>

如果不需要，您也可以删除<li>。

Answer 3

添加此

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

Answer 4

在span标记中添加样式会修复它

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> sample-email@gmail.com</p>
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Answer 5

所以意味着人们，为什么这么多人投票......

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

对齐文本旁边的字体真棒图标

5 个答案: