html - 用 CSS 中的 Font Awesome 图标替换 <img> 标签

Question

我在遗留应用程序周围有数百个图标:

<img class="date-picker" src="/image/datepicker.png">

下面的 CSS 删除了 datepicker.png 但字体很棒的图标没有显示

.date-picker {
    background-image: none;
}
.date-picker:after{
    font-family: FontAwesome;
    content: "\f073";
    color:grey;
    font-size:25px;
}

有没有办法在不更改 IMG 标签的情况下实现这一点？

Answer 1

伪元素仅适用于 src 属性加载失败的图像。如果图像成功加载，则不会使用伪元素。

您可以做的一件事是将其应用于父元素，但这显然取决于您的标记:

div {
  height: 100px;
  width: 100px;
  position: relative;
}

div img {
  display: none;
}

div::after {
  content: 'foo';
  position: absolute;
  top: 0;
}

<div>
  <img src="http://placehold.it/100x100" />
</div>

这里我们隐藏了 img 元素并将伪元素应用于 div 容器，然后绝对定位伪元素位于内部(好吧，在顶部的)div。