pixel 2.3.1 - adding toastr breaks the icons

[amitai52]

Adding toastr breaks the icons in the 4 different msgs. This is caused by 2 things:

1. font-awesome is used in the CSS instead of the background images that are default but FA is not added / install / required - so icon comes up empty If you want to use your SCSS mod, FA must be included before.

2. Also, the the CSS :before + content: statements are copied wrong (looks like encoding problem) - so icon corrupts on the way and displays wrong even after FA is included

(using builder on MacOS)

[smnedelko]

1. You're right, PA's toastr depends on FontAwesome
2. I tried to compile sources with bulder, but I cannot reproduce the issue - the compiled sources work fine. You can try to compile sources with npm run compile command

[smnedelko]

It seems that I found the problem - Sass compiler converts unicode variables to UTF-8 characters. This is can cause problems. Since I can't reproduce the problem, could you test the solution?

1. Append the next code into the source/scss/mixins/_tools.scss

@mixin unicodeContent($content) {
  content: unquote("\"")+unquote(str-insert($content,"\\", 1))+unquote("\"");
}

2. Replace the next strings in the source/scss/_variables.scss

$toastr-icon-success:     "\f00c" !default;
$toastr-icon-error:       "\f057" !default;
$toastr-icon-info:        "\f129" !default;
$toastr-icon-warning:     "\f071" !default;

with

$toastr-icon-success:     "f00c" !default;
$toastr-icon-error:       "f057" !default;
$toastr-icon-info:        "f159" !default;
$toastr-icon-warning:     "f071" !default;

3. Replace the next strings in the source/scss/plugins/_toastr.scss

.toast-success:before { content: $toastr-icon-success; }
.toast-error:before { content: $toastr-icon-error; }
.toast-info:before { content: $toastr-icon-info; }
.toast-warning:before { content: $toastr-icon-warning; }

with

.toast-success:before { @include unicodeContent($toastr-icon-success); }
.toast-error:before { @include unicodeContent($toastr-icon-error); }
.toast-info:before { @include unicodeContent($toastr-icon-info); }
.toast-warning:before { @include unicodeContent($toastr-icon-warning); }

4. Rebuild sources

Thank You

[amitai52]

Thanks for your answer, the above changes do solve the problem ...

[throny]

When will this bug be fixed in the official version?