用 CSS 中的字体真棒图标替换 <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 内部（嗯，在上面）。

Answer 2

您可以将图像包装在一个跨度中并使用相同的类。

img.date-picker {
  display: none;
}
span.date-picker:after {
  font-family: FontAwesome;
  content: "\f073";
  color: grey;
  font-size: 25px;
  display: inline-block;
  margin: 1em;
  /* demo only */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<span class="date-picker"><img class="date-picker" src="/image/datepicker.png"></span>

Answer 3

使用 jquery 你可以找到所有的 img 标签并将 img 包装在一个图形标签中，然后应用图标类。