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

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>标记执行此操作。查看他们的examples。

这样的事情：

<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=""标记非常重要，因此谷歌可以看到您的链接锚文本。