替换< img>标记与CSS的字体真棒图标 [英] Replace <img> tag with font awesome icon from CSS

问题描述

 < img class =date-pickersrc = /image/datepicker.png\"> 
  

以下CSS将删除datepicker.png，但不会显示字体超赞图标

  .date-picker {
 background-image：none; 
} 
 .date-picker：在{
 font-family：FontAwesome; 
内容：\f073; 
颜色：灰色; 
 font-size：25px; 
} 
  

有没有办法在不改变IMG标签的情况下做到这一点？ p>

解决方案

伪元素仅适用于 src 属性无法加载的图像。如果图片加载成功，伪元素将不会被使用。

你可以做的一件事就是将它应用到父元素，但这显然取决于你的标记：

div {height：100px;宽度：100px; position：relative;} div img {display：none;} div :: after {content：'foo';位置：绝对; top：0;}

< div> < img src =http://placehold.it/100x100/>< / div>

在这里，我们隐藏 img 元素并将伪元素应用于 div container，然后将伪元素置于 div 的内部（以及顶部）。

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?

解决方案

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.

这篇关于替换< img>标记与CSS的字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！