我有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;
}
5条答案
按热度按时间cigdeys31#
Toaster使用背景PNG图像(24x24像素)作为图标,因此您的最佳选择是简单地将其替换为您事先准备的彩色版本。
假设你准备了一个相同大小的“黑色复选标记”PNG,那么CSS将是:
现在,要创建您想要的颜色的图标,请查看flaticon.com(或其他类似网站)。你应该能够找到免版税的图标,并下载你想要的大小和颜色。
jdzmm42g2#
尝试使用此示例代码有深红之心
whhtz7ly3#
我知道这是一个老问题,但我找到了一个更好的解决方案(没有重写现有的toastr模板图标)。如果你不想改变“toast-success”的当前图标,但想用不同的图标创建新的“模板”-你可以使用这个传递JS中的特定图标类:
然后设置“toast-custom”的CSS:
我希望这会有帮助!
wrrgggsh4#
CSS
JS
cetgtptt5#
使用我的项目文件夹中的background-image