[英]Replace <img> tag with font awesome icon from CSS
遗留应用程序周围有数百个图标:
<img class="date-picker" src="/image/datepicker.png">
以下CSS删除了datepicker.png但不显示字体真棒图标
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
有没有办法在不改变IMG标签的情况下实现这一目标?
伪元素仅应用于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
内部(好吧,在顶部)。
您可以将图像包装在一个范围内并使用相同的类。
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>
使用jquery,你可以找到所有img标签并将img包装在一个figure标签中,并将图标类应用于该标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.