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

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

Twitter bootstrap 使用<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 2

无序列表对于导航菜单很常见。您可以根据需要设置ul和li标记的间距并对齐每个链接。您应该在li标签上设置类或 ID 并设置背景图像位置。一个很好的例子是here

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

Answer 3

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