Foundation - 图标栏：<label> inside <a> 验证问题

Question

我正在尝试使用 Foundation 框架构建 Icon Bar。建议的官方方式是：

<a class="item">
  <img src="../assets/img/images/fi-home.svg" >
  <label>Home</label>
</a>

我想使用 Font Awesome 图标并这样做了：

<a class="item" href="http://localhost/">
  <i class="fa fa-home"></i> 
  <label>Home</label>
</a>

在验证器中检查此代码时，我收到错误消息：元素标签不得作为 a 元素的后代出现。

如何在保持功能的同时解决这个问题？谢谢！

Answer 1

看起来基金会使用的 HTML 结构不是 100 有效的。您可以使用

 <a class="item" href="http://localhost/">
  <i class="fa fa-home"></i> 
  <span class="label">Home</span>
</a>

并更新 css 以确保它看起来像标签

或者保持原样并告诉基金会修复它..

Answer 2

[可能] .scss 文件中完整的 .label 样式集是：

.icon-bar {
  .label {
    display: block;
    color: $icon-bar-font-color;
    font-size: $form-label-font-size;
    background: $icon-bar-bg;

    &:hover {
      color: $icon-bar-font-color-hover;
    }
  }
  .active .label {
    background: $icon-bar-hover-color;
  }
}

此解决方案假定您在此 .scss 文件中拥有所有可用的 Foundation 变量。

以上样式使用：

<a class="item" href="http://localhost/">
  <i class="fa fa-home"></i> 
  <span class="label">Home</span>
</a>

会达到预期的效果。

Foundation - 图标栏：<label> inside <a> 验证问题

Foundation - Icon Bar: <label> inside <a> validation issue

html

zurb-foundation