Css 如何更改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;
}

---

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

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

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

#toast container>。toast成功{
背景图像：url（）！重要；
}

---

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

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

style.css

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

---

我知道这是一个老问题，但我找到了更好的解决方案（无需重新编写现有的toastr模板图标）。 如果您不想更改“toastr success”的当前图标，但想创建具有不同图标的新“模板”-您可以在JS中使用此传递特定图标类：

toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});

然后只需设置“toast custom”的CSS：

我希望这会有帮助

CSS

        #toast-container > .toast {
            background-image: none !important;
        }

        #toast-container > .toast:before {
            position: relative;
            font-size: 24px;
            line-height: 18px;
            float: left;
            margin-left: -1em;
            color: #FFF;
            padding-right: 0.5em;
            margin-right: 0.5em;

        }
        #toast-container .toast{
            background-color: #1b75bc !important;
        }
        #toast-container> .fa-check , .toast {
            background-color: #328b17 !important;
        }
        #toast-container> .fa-trash , .toast  {
            background-color: #590619 !important;
        }


        .toast-message{
            font-family: Calibri;
        }

          toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "3000",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "300",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut",
            iconClasses: {
                error: 'fas fa-trash',
                info: 'fa fa-info',
                success: 'fas fa-check',
                warning: 'something',
            },
        };

JS

        #toast-container > .toast {
            background-image: none !important;
        }

        #toast-container > .toast:before {
            position: relative;
            font-size: 24px;
            line-height: 18px;
            float: left;
            margin-left: -1em;
            color: #FFF;
            padding-right: 0.5em;
            margin-right: 0.5em;

        }
        #toast-container .toast{
            background-color: #1b75bc !important;
        }
        #toast-container> .fa-check , .toast {
            background-color: #328b17 !important;
        }
        #toast-container> .fa-trash , .toast  {
            background-color: #590619 !important;
        }


        .toast-message{
            font-family: Calibri;
        }

          toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "3000",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "300",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut",
            iconClasses: {
                error: 'fas fa-trash',
                info: 'fa fa-info',
                success: 'fas fa-check',
                warning: 'something',
            },
        };

---

请分享您的代码。。。