html - 如何将 Sprite 图像添加到也有 anchor 文本的 anchor

Question

我正在使用 sprite 图像作为 anchor 标记，它也作为 anchor 链接，例如:

<a>Hello</a>

我的CSS:

a:link {
  background: url(sprites.PNG) no-repeat 0 0;
  color: #F7B600 !important;
  padding-left: 5px;
  padding-right: 7px;
}

我只想为 Sprite 背景图像提供高度和宽度。但是如果我为 anchor 设置宽度和高度，那么 anchor 的文本就会采用该尺寸。

有什么办法吗？

Answer 1

您必须在图像的 anchor 标记内使用一个元素

i {
    width: 46px;
    height: 44px;
    display: inline-block;
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 0 0
}

<a href="#"><i></i>testing icon</a>