什麼是用圖標創建導航欄的正確方法

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