Replace 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?

Check this out - http://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements — Luís P. A., Sep 24 '15 at 09:21

score 7 · Accepted Answer · answered Sep 24 '15 at 09:22

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.

score 0 · Answer 2 · answered Sep 24 '15 at 09:26

0

You could wrap the image in a span and use the same class(es).

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>

answered Sep 24 '15 at 09:26

Paulie_D

107,962
13
142
161

1

Pretty sure they'd convert the `img` element into a Font-Awesome icon if they could modify the source directly... furthermore if they can directly modify the source they shouldn't be doing this anyway. :P – James Donnelly Sep 24 '15 at 09:28
1

True...just throwing options out there, Perhaps wrapping with JQuery `wrap()`? – Paulie_D Sep 24 '15 at 09:29

score 0 · Answer 3 · answered Sep 24 '15 at 09:38

0

Using jquery you can find all the img tag and wrap the img in a figure tag and apply the icon class to that.

answered Sep 24 '15 at 09:38

Sanjay Bhardwaj

412
2
10

Replace tag with font awesome icon from CSS

3 Answers3

Linked