如何使用<i>标签与图标？

Question

我有一套图标和CSS代码，用于将图标绑定到元素，但我无法让“i”标签在不填充内容的情况下与图标集配合使用。我需要为标签添加自定义代码吗？

我看到Twitter Bootstrap使用“i”标签来表示图标。另外，我尝试了span标签，但也不起作用。当我使用“li”或“div”标签时，它们可以正常工作。

我错过了什么？提前感谢您！

这个不起作用。

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

这个有效

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

我的CSS代码示例

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

- Fredrik Westerlund

---

为什么不使用带有 font-style:italic 的 div，我不认为它是块级元素。 - DevZer0

我想在标题标签内使用图标，而DIV不是标题内的有效元素。请重新阅读我的问题，我不想要斜体文本。 - Fredrik Westerlund

Twitter Bootstrap使用此标签，因为CSS就是为此而生的。其中包含了图像所需部分的“映射”位置。请参见CSS Sprites。 - PiLHA

PiLHA，如果你看到我的问题，你也可以看到我为它制作了一个spritemap。 - Fredrik Westerlund

Answer 1

标签<i>用于表示其中的文本应该呈现为斜体。在这种情况下使用它是没有意义的。

如果您仍想保留它而不使用其他标签，如div，问题是<i>是行内元素，而不是块级元素，如div。 在CSS中添加display: inline-block;即可解决问题。

- Fiona - myaccessible.website

---

谢谢，我只尝试了display:block。inline-block有效！i标签是语义化的“图标”，使用较少的文本，这是绑定图标的好方法。 - Fredrik Westerlund

@FredrikSkägglösWesterlund 如果你需要支持IE7，使用<span>和display:inline-block可能是个好主意，因为IE7只支持默认为display:inline的元素上的inline-block（参见http://caniuse.com/inline-block）。 - 0b10011

Answer 2

您可以使用 img 标签来显示图标。从语义上讲，这更有意义，因为它毕竟是嵌入式内容，并且图标将是可以触摸的。

- Explosion Pills

---

我认为他正在使用基于我们拥有的片段的精灵。 - Fiona - myaccessible.website

我正在使用CSS图像拼合，所以<img>标签帮助不大。不管怎样，谢谢！ - Fredrik Westerlund

@FredrikSkГӨgglГ¶sWesterlundпјҢдҪ д»Қ然еҸҜд»ҘдҪҝз”Ё<img>ж ҮзӯҫжқҘе®һзҺ°пјҢдҪҶжҳҜдҪ йңҖиҰҒдёҖдёӘеҢ…еӣҙж ҮзӯҫжқҘиҰҶзӣ–е®ғе‘Ёеӣҙзҡ„жүҖжңүеҶ…е®№гҖӮ - Explosion Pills

好的，这不是我想要的解决方案。不过现在它已经可以工作了，谢谢 :) - Fredrik Westerlund

Answer 3

除了语义之外，你没有看到任何东西，因为<i/>元素默认是inline的。你可能想要添加display: inline-block;到.icon规则集中，以匹配Bootstrap如何呈现它们的图标。

如果你关心语义，使用<div/>或<span/>代替。

- André Dion

---

是的，谢谢！我认为在我的情境中<i>标签更适合图标。我还遵循了这里的另一个线程，该线程论证了<i>标签在图标方面的好处。 https://dev59.com/zWgu5IYBdhLWcg3ws5FC - Fredrik Westerlund

我认为这并不像一些人所说的那样严重。关于<i/>（和<b/>）的语义定义相当宽松，正如你链接的线程所显示的那样。没有文本的<i/>没有固有的含义，因此在我的看法中，将其用作纯粹呈现元素的方式是完全可以接受的。 - André Dion

我认为斜体标签<i>应该过时了，应该用<em>替代它，所以为什么不好好利用失业的<i>呢。 - jimeast

Answer 4

兄弟，只需在“.icon”上添加“display: inline-block”即可，这或许会起作用。

- Salih K