用CSS替换<img>标签为Font Awesome图标

Question

我有几百个图标用于一个旧版应用：

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

以下CSS代码可以移除datepicker.png，但是FontAwesome图标无法显示。

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

有没有一种方法可以在不更改IMG标签的情况下实现这个功能？

- Vojtech B

---

图片不能有伪元素，所以不行。 - Paulie_D

请查看此链接 - https://dev59.com/Oms05IYBdhLWcg3wLO-Q - Luís P. A.

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内部。

- James Donnelly

Answer 2

你可以将图像包装在一个 span 中，并使用相同的类。

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>

- Paulie_D

---

如果他们可以直接修改源代码，他们肯定会将img元素转换为Font-Awesome图标...而且如果他们可以直接修改源代码，他们本来就不应该这样做。 :P - James Donnelly

真的...只是提供一些选项，也许用JQuery的wrap()方法包装一下？ - Paulie_D

Answer 3

使用jQuery，您可以找到所有的img标签，并将img标签包装在figure标签中，并将icon类应用于其中。

- Sanjay Bhardwaj