在文本旁边对齐字体强大的图标
如何将图标与干净的外观对齐?我的代码粘贴在下面。看起来像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>
解决方案
您可以使用字体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>
相关文章