html - font-awesome 图标和 p 标签

Question

所以我一直在尝试将地址与地址左侧的字体图标对齐。我也在使用 foundation zurb 框架。

<i class="fa fa-location-arrow fa-1x"></i><p>
        58 High Street <br />
        Harpenden Herts <br />
        AL5 2SB</p>

我是这样做的，但我想知道是否还有其他方法。

<span style="">58 High Street</span> <br />
        <span style="padding-left:18px;">Harpenden Herts</span><br />
        <spane style="padding-left:18px;">AL5 2SB</span>
        <br /><br />

http://jsfiddle.net/gpL42zbm/我使用图像持有者来说明图标。

Answer 1

在 HTML 中，总是有“另一种方式”做事。 :)

首先，您谈论的是地址，因此我建议考虑使用微格式 hCard/vCard 来标记您的内容。还需要考虑 HTML5 地址标记，但这里有两个资源。

• > http://microformats.org/wiki/h-card
• > http://html5doctor.com/the-address-element/

首先将地址信息标记为微格式。

<div id="" class="vcard">
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

如果你有一个人的名字，添加到 <b class="fn n"></b>元素。如果是组织名，加org到类名。

旁注，在 HTML5 中，我更喜欢使用 <b>语义无意义标记的标记，而不是 <span>因为它只是少了 6 个字符，我觉得它有助于稍微提高可读性。唯一的问题是你必须记住删除 bold font-weight 的标准浏览器格式

使用上面的标记，您有大量的钩子(Hook)和微观语义含义可以将您的 CSS 绑定(bind)到格式中。一个例子可能是

.vcard b { font-weight:normal; }
.vcard > .adr > .street-address, 
.vcard > .adr > .locality { display:block; }

现在，您只需将超棒的字体图标添加到组合中即可。

<div id="" class="vcard">
  <b class="icon fa fa-location-arrow fa-1x"></b>
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

现在，您只需要定位它。这里也有多种选择。两个常见的选项是 float 元素或绝对定位元素。我将绝对定位它以使对齐地址文本更清晰。

.vcard { position:relative; padding-left:35px; }
.vcard > .icon { position:absolute; top:0; left:0; }

上面的 CSS 所做的是应用 position:relative包含元素的样式，以允许子元素轻松定位在其自身内。

然后我将图标绝对定位在 .vcard 的左上角。 .由于示例 fiddle 使用了一个 30x30 像素的图标，因此我在左侧添加了一个 35 像素的填充以将地址内容推到上方并为图标留出空间并避免重叠，同时给它一个小间距。

这是一个使用上述代码更新的 Fiddle 示例。

http://jsfiddle.net/gpL42zbm/2/

如果您希望将图标与街道号码放在同一行，您可以使用 float ，而不是绝对定位图标。

这是一个使用 float 的更新示例:http://jsfiddle.net/gpL42zbm/3/

这里的变化只是 CSS:

.vcard > .adr > .street-address{ display:block; line-height:2.25; }
.vcard > .icon { float:left; margin-right:0.25em; }

首先，我将图标向左浮动，并留出一点右边距以分隔文本和图标以提高可读性。

然后我调整较少的街道地址以增加它的行高(您也可以只使用填充)，因此使该行与图标的高度大致相同，允许较低的行环绕在图标下方。

当然，还有其他给猫剥皮的方法，但我希望这里有几个选项可以帮助您到达目的地!

干杯!

约翰