FontAwesome Icons with Toastr

What do you get when you combine FontAwesome icons with Toastr? Maybe ToastrAwesome or ToastAwesomer. If you have used Toastr then you know you can use your own CSS styling and make the toast look however you desire. Toastr comes with 4 basic icons as background images, but what FontAwesome allows you to do is use its icons instead of a background image. This post will show you how to do that so you can use any of the FontAwesome icons with Toastr, using only CSS.

This technique uses the CSS psuedo-selectors and works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers, according to CanIUse.com. First, we need to remove the background-image and then we can set up our positioning for all toast content. You can tinker with the styles in the .toastr:before selector if you need something slightly different.

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

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

Next we can tell toastr which icon to use for each of the 4 toast types. We set this through the CSS content and set it to the icon that you desire. Here is a cheatsheet from FontAwesome that can help you pick the right one for you.

#toast-container > .toast-warning:before {
    content: "\f003";
}
#toast-container > .toast-error:before {
    content: "\f001";
}
#toast-container > .toast-info:before {
    content: "\f005";
}
#toast-container > .toast-success:before {
    content: "\f002";
}

And that’s it! If you want to see a full demo, check out this plunker I whipped up.