如何使用帶有圖標的標籤？

我有一個圖標集和CSS代碼綁定到一個元素的圖標，但我無法得到「我」標籤與圖標設置工作W/O填充內容。我必須爲標籤添加自定義代碼嗎？如何使用帶有圖標的標籤？

我見過Twitter Bootstrap使用圖標的「我」標記。另外，我試過了span標籤，那也不管用。當我使用「li」或「div」標籤時，它可以工作。

我錯過了什麼？提前致謝！

這並不不工作

<i class="icon icon-accessibility"></i>

這作品在我的CSS的

<i class="icon icon-accessibility">BLAH</i>

例如

.icon {background: url('/images/icons.png') no-repeat top left;} 
.icon-accessibility{ background-position: 0 0; width: 32px; height: 32px; }

爲什麼不使用一個div'字體樣式：italic'，我不相信我是一個塊元素。 – DevZer0

我想在標題標記內使用圖標，而DIV不是標題內的有效元素。我不想斜體文字，請再次閱讀我的問題。 –

twitter引導使用這個標籤，因爲CSS是爲此製作的。其中有一個作爲所需部分的圖像位置的「映射」。參見[CSS Sprites]（http://css-tricks.com/css-sprites/） – PiLHA

的標籤被用於表示與文本中應該是斜體。在這種情況下使用它是沒有意義的。

如果您仍想保留它而不使用其他類似div的問題，則問題在於標記是內聯元素，而不是像div這樣的塊元素。將display: inline-block;添加到您的CSS中，它將起作用。

2013-07-04 13:23:50

謝謝，我只試過顯示：塊。內聯塊工作！ i標籤具有「圖標」的語義並使用較少的文本，這是綁定圖標的好方法。 –

@FredrikSkägglösWesterlund如果您需要支持IE7，使用'''display：inline-block'，這可能是一個好主意[默認情況下，默認爲display：inline' ]（http://caniuse.com/inline-block）。 – 0b10011

您可以使用img標籤來顯示圖標。這在語義上更有意義，因爲它畢竟是嵌入式內容，並且圖標將被觸摸。

2013-07-04 13:26:36

我假設他正在使用基於我們的代碼片段的精靈 –

我使用的是CSS spritemaps，因此標記不會有太大的幫助。不管怎麼說，還是要謝謝你！ –

@FredrikSkägglösWesterlund你仍然可以用''標籤做到這一點，但是你需要一個周圍的標籤來覆蓋它周圍的所有東西 –

不考慮語義，因爲元素默認爲inline，所以沒有看到任何東西。您可能希望將display: inline-block;添加到.icon規則集以匹配Bootstrap呈現其圖標的方式。

如果您關心語義，請改用<div/>或。

2013-07-04 13:27:29

是的，謝謝！我認爲標籤更適合我的環境中的圖標。我也在這裏跟着另一個線索，它爲圖標標記的好處提供了支持。 http://stackoverflow.com/questions/11135261/i-tag-for-icons –

+0

我不認爲這是一件大事，因爲有些人正在做它。圍繞''（和''）的語義相當寬鬆地定義，這在您鏈接的線程中很明顯。沒有文字的''沒有內在含義，所以完全可以接受（IMO）將其用作純粹表現元素的方式。 –

2

Brthr，只需添加一個「顯示：inline-block的」你「.icon」，它可能工作

來源

2013-07-04 13:33:23

如何使用帶有圖標的<i>標籤？