在文本旁边对齐字体强大的图标

沃梦达教程前端问题

2022-01-01

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)。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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>

这篇关于在文本旁边对齐字体强大的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：在文本旁边对齐字体强大的图标