Replace <img> tag with font awesome icon from CSS

Question

I have several hundreds of icons around a legacy application:

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

Following CSS removes the datepicker.png but the font awesome icon is not displayed

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

Is there a way how to achieve this without changing the IMG tags?

Answer 1

Pseudo-elements only get applied to images whose src attributes fail to load. If the image successfully loads, the pseudo-element will not be used.

One thing you can do is apply this to the parent element, but this obviously depends on your markup:

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>

Here we hide the img element and apply the pseudo-element to the div container, then absolutely-position the pseudo-element to sit inside (well, on top of) the div.