CSS changes with 1.7

[Ultama]

How would I go about changing the icons for toastr's? Previously you would be able to do:

 #toast-container > .toast-error:before {
    font-family: 'FontAwesome';
    content: "\f1f8";
}

however this does not work anymore. Having being forced to change and include !important using:

 #toast-container .toast-error:before {
    font-family: 'FontAwesome' !important; 
    content: "\f1f8" !important;
}

The default icon still appears, but the new icon is reduced drastically in size. The results are as follows:

Toastr with custom icon

prior to the update they would appear as the same size as the default icons, and using

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

this would remove all of the default icons and allow me to use my own ones (which now does not work also).

How would I go around adjusting the icons so they appear the correct size?

[Foxandxss]

Are you using the master version? I removed replace: true but just in master.

[Ultama]

If you are referring to css file then no, I am using my own .less file that overrides the properties.

The issue was fixed by removing the > symbols within the CSS classes, such as:

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

instead of

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

but you may want to include in the change logs that changes were made as it confused me for a while and I tried reverting back to 1.6 without any luck.

Thank you for your quick response :)

[Foxandxss]

The changes in the changelog are the only changes made.

I have a change yet to release but it is just in master.

[Ultama]

When was the last point the CSS was changed? I only updated to version 1.7 yesterday and found the issues today but looking at the history of the CSS files there are indications that changes have been made (I originally tried to just use the old version's CSS files with version 1.7 however that caused transparency and other issues)

Comparison of files, old on the left, new on the right

[Foxandxss]

That one is on master, never released as a npm package.

To make that master .less to work, you need the new toastr directive.

[Ultama]

Oh right, thanks for the response :+1: