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

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

监守你将使用图片为您导航，您添加alt=""标签中，Google就会看到你的链接锚文本及其重要。

Answer 3

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; 
}