用很棒的字体替换 CSS 背景图像

Question

如何用字体真棒图标替换背景图片网址？

我有以下导航：

<li class="active"><a href="anotherPAge" class="dispatch">Test</a></li>

调度css：

nav ul li a.dispatch {background: url(../images/portal-sprite.png) no-repeat -160px 5px;}

portal-sprite.png 是一个带有图像（图标）的文件。如何替换它以在 CSS 背景中包含字体真棒用户检查图标？

谢谢

Answer 1

W3Schools 在 z-index 上有一个很好的例子。您可以使用 z-index 属性将字体真棒图标放在任何其他元素的后面。您需要将图标放在 html 中，而不是在 CSS 中使用 background。该示例还使用了图像。只需将图像替换为您的图标，将标题和文本替换为您的列表元素。希望有帮助。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

HTML：

<h1>The z-index Property</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>

CSS：

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}