滤镜与按钮图标的变色

回到相关文章 »

效果

删除 删除

代码

CSS代码：
.icon-delete {
    display: inline-block;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath ...fill='%234c5161'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    vertical-align: -4px;
    margin-right: 5px;
}
.ui-button-primary .icon-delete {
    filter: brightness(100);
}
HTML代码：
<a href="##" class="ui-button">
    <i class="icon-delete"></i>删除
</a>
<a href="##" class="ui-button ui-button-primary">
    <i class="icon-delete"></i>删除
</a>