Option to use Font Awesome icons

[codeseven]

Option to use Font Awesome icons

[e-m-s-y]

Overriding the CSS is not a fix for this ticket. It's a workaround. I just want to pass an option with the FontAwesome unicode or icon name.

[MaxInMoon]

Why using iconClasseschange the background color?

[tbragaf]

@coderdave You can still do something like this:

toastr.options = {
  iconClasses: {
    error: 'fa fa-close',
    info: 'fa fa-info',
    success: 'something',
    warning: 'something'
  },
};

It is a bit late, but does this help?

[kagan94]

@MaxInMoon
Because it replaces the toastr container class toast-success.
You could use it in this way:

toastr.options = {
  iconClasses: {
    success: 'toast-success fa fa-close'
  }
};

The implementation is not quite good because it overrides the class of the whole container instead of adding icon as separate <i class="fa fa-close"/> tag

[johnpapa]

You can do this now by overriding the CSS yourself.

Glad you like toastr!

[JamoCA]

It's been ~2 years since this initial request. FontAwesome is being used in a lot more web applications now. Could toastr be updated so that it accepts a FontAwesome icon classname or unicode?
http://fortawesome.github.io/Font-Awesome/cheatsheet/

I'd like to customize the icon based on the message "category" (email, cart, photo, social brand, etc) and use the warning/info/success/error classes to continue managing the themed colors. Generating static CSS per message type or using Javascript to temporarily override CSS for a single toastr call isn't optimal.

As a potential work around, is it possible/recommend to use jQuery to chain a icon swap after the toastr message is generated but before it's displayed? Thanks.

[TimFerrell]

Font Awesome icons aren't used natively in toastr, but are converted to a base64 representation that is stored within the CSS file. If you'd like to specify additional toast types, you're more than free to modify the toastr.js and toastr.css files to add those additional types.

The existing toastr methods (success, info, etc) already return a jQuery wrapped DOM element reference of the toast that was created by that call.

[chuyneloxx]

I can't hide the original icon of the toast. I have tried with an example with this code.

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

But doesn't work. Any idea.

[TimFerrell]

@chuynelo - can you please post your question to Stack Overflow?

[JamoCA]

I found a similar notification jQuery plugin called Lobibox that supports more options (images, sound support, multiple sizes, etc.) I liked the simplicity of Toastr, but found myself continually wishing it were more customization.

[TimFerrell]

@tbragaf's snippet looks like it'll work.

@JamoCA - sorry you felt like Toastr wasn't a good fit. Lobibox seems to have a lot more capabilities that toastr intentionally leaves out of its scope.

[avalanche1]

@JamoCA wow, Lobibox looks really kewl!

[JoaoHamerski]

The solution i found:
Download the icon you want in svg format from FontAwesome site, after that, open the file with some text editor and change "<path fill="currentColor" to "<path fill="#ffffff" (because the default is black and toastr.js use white icons).

After that use https://www.svgtopng.me/ to convert the svg to png file, in this website you have to resize to 24x24 (is the toastr default size of icon but you can choose what you want), and convert.

Now you can use this png image on toastr notification like so:

#toast-container > .toast-success {
    background-image: url('path-to-png-image') !important;
}

or you can encode the png image to base64 using this site: https://www.base64-image.de/

and use it the same way as toastr

#toast-container> .toast-success {
   background-image: url('base-64-image') !important;
}

Live example here: https://codepen.io/JoaoHamerski/pen/zYGpdxK

This solution is a little long but is the most consistent way to replace the icons that i found.