在文本旁边对齐字体强大的图标 [英] Aligning font awesome icons beside text
本文介绍了在文本旁边对齐字体强大的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将图标与干净的外观对齐？我的代码粘贴在下面。看起来像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>这篇关于在文本旁边对齐字体强大的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
