Have Geek Brain

Replace <img> tag with awesome icon font from CSS

I have several hundred icons around a legacy application:

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

After CSS removes datepicker.png but font awesome icon is not showing

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

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

+3


source to share


3 answers


Pseudo-elements apply only to images, no attributes src

are loaded. If the image is loaded successfully, the pseudo-element will not be used.

One thing you can do is apply this to the parent, 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>
Run code


Here we hide the element img

and apply the pseudo-element to the container div

, and then absolutely-position the pseudo-element to sit inside (well, on top) div

.

+6


source


You can wrap the image in between and use the same class.



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>
Run code


0


source


With jquery, you can find all img tags and wrap the img in a picture tag and apply an icon class to it.

0


source






More articles:


All Articles