如何更改toastr中的图标填充颜色

Question

我的应用程序中显示了 toastr 成功和错误消息。我更改了背景颜色和字体颜色。我想更改消息中显示的图标颜色。我已经到处搜索了这个，但我找不到改变图标填充颜色或至少改变图标的方法。下面是成功消息的截图

以下是错误消息，

我想更改这些消息中显示的图标，以更改图标的填充颜色。 js文件中的代码，

 .success(function(data) {
     toastr.success('Successfully Build ', 'Congratulations!', {
                        closeButton: true
                    });
}).error(function(err) {
    toastr.error('Cant Build', 'Error', {
                        closeButton: true
                    });

在 CSS 中，

 #toast-container > .toast-success {
    background-image: none;
    background-color: #e9e9e9;
    color: black;
}
#toast-container > .toast-error {
    background-image: none;
    background-color: #e9e9e9;
    color: red;
}

原文由 shamila 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Toaster 使用背景 PNG 图像（24x24 像素）作为图标，因此您最好的选择就是将它们替换为您事先准备好的彩色版本。

假设您准备了一个相同大小的“黑色复选标记”PNG，那么 CSS 将是：

 #toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}

现在要以您想要的颜色创建图标，请查看 flaticon.com（或其他类似网站）。您应该能够找到免版税图标并下载所需大小和颜色的图标。

原文由 Jean-Yves Fargeat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试使用此示例代码拥有深红色的心

style.css

#toast-container > .toast-success:before {
    content: "\f004";
    color: crimson;
}

原文由 V.Tran 发布，翻译遵循 CC BY-SA 3.0 许可协议