用字体真棒替换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;}

门户精灵.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;
}