将 CSS 背景图片替换为 awesome 字体

Question

如何用超棒的字体图标替换背景图片 url？

我有以下导航：

<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 属性将 font awesome 图标放在任何其他元素后面。您需要将图标放在 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;
}

将 CSS 背景图片替换为 awesome 字体

Replace CSS background image with font awesome

html

css

font-awesome