创建带有图标的导航栏的正确方法是什么

Question

如何在语义上标记图标+文本的导航栏，其中文本位于图标下方，图标是精灵。

还有两个条件：导航框的宽度不同，图标也应该作为链接（可点击）

具体示例为www.emex.ru.

换句话说：如何转换<ul>
<li>
<a><img width=32 height=32/><br/>Link1</a>
</li>
<li>
<a><img width=32 height=32/><br/>Link2</a>
</li>
</ul>

到没有<img>元素的版本

Answer 1

导航菜单通常使用无序列表。您可以根据需要对ul和li标记进行样式设置，以使每个链接间隔开并对齐。您应该在li标签上设置类或ID，并设置背景图像的位置。就是一个很好的例子

http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/

Answer 2

Twitter引导程序使用<i>标记来完成此操作。请参阅他们的示例。

这样的东西：

<li>
  <a>
    <i class="icon-shoe"></i> 
    Shoe
  </a>
  <a>
    <i class="icon-balloon"></i> 
    Balloon
  </a>
</li>

然后在你的CSS中：

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.icon-shoe {
  background-image: url("path/to/shoe/icon.png") no-repeat;
}
.icon-balloon {
  background-image: url("path/to/balloon/icon.png") no-repeat;
}

Answer 3

因为您将使用图像进行导航，所以在中添加alt=""标记非常重要，这样谷歌就可以看到您的链接锚文本。