html - 如何使用带有图标的 <i> 标签？

Question

我有一个图标集和 CSS 代码来将图标绑定(bind)到一个元素，但我无法让“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; } 

Answer 1

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

如果您仍想保留它而不使用其他类似 div 的东西，问题是 <i>标签是内联元素，而不是像 div 这样的 block 元素.添加display: inline-block;添加到您的 CSS，它将起作用。