将 <img> 标签替换为 CSS 中的超赞字体图标
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
容器,然后将伪元素绝对定位到位于 [= =14=].
您可以将图像包裹在一个范围内并使用相同的 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>
使用 jquery 您可以找到所有 img 标签并将 img 包装在图形标签中,然后将图标 class 应用于该标签。
我在遗留应用程序周围有数百个图标:
<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
容器,然后将伪元素绝对定位到位于 [= =14=].
您可以将图像包裹在一个范围内并使用相同的 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>
使用 jquery 您可以找到所有 img 标签并将 img 包装在图形标签中,然后将图标 class 应用于该标签。