0

I'm using toastr and when I display a success message, by default there was a font-awesome "check" icon there, but after I upgraded to FA-5, the icon is gone now.

I inspected element and saw these rules for the toastr container:

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

The CSS for the check icon - taken from here

#toast-container > .toast-success::before {
    content: "\f00c";
}

The icon won't render. Is this a known compatibility issue or am I doing something wrong?

Update: The questions that were suggested after marking this one as duplicate: I tried:

#toast-container > .toast::before {
    position: fixed;
    font-family: Font Awesome 5 Free;    //Changing this did not work!
    font-size: 24px;
    line-height: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}
DeA
  • 1,748
  • 3
  • 22
  • 41

0 Answers0