css - 将 Sprite 图标添加到标签。有没有办法只为 Sprite 设置宽度/高度，并为标签设置第二个宽度/高度？

Question

这可能是一个新手问题，但是是否可以将 Sprite 图标添加到带有文本的标签中？

例如:

<label class="icon">labeltext</label>

<style>
 .icon {
    width: 30px
    height: 30px;
    background: url("icon.png") no-repeat scroll 0 0 transparent;
 }
</style>

当我将宽度设置为 30px 时，整个文本不显示。有没有办法在 div/label/span 中添加 Sprite 图标和文本？

我的真实代码看起来更像这样

<span class="additional-background">
    <span>text text text text</span>
</span>

如果我在 Sprite 图标所在的附加背景上设置宽度/高度，您将看不到文本范围内的文本。如果我在文本范围上设置宽度，我将无法在“附加背景”上进行点击事件。

附加我需要设法在图标上发生点击事件，而不是在文本上发生

Answer 1

试试这个:

HTML

<label class="icon">labeltext</label>

CSS

.icon {
  display: inline-block;
  line-height: 30px;
  padding-left: 30px;
  background: url("icon.png") no-repeat scroll 0 0 transparent;
}