Howdy,
I’m trying to customize the menu entry for the branding plugin on child sites to replace the default cog icon with an SVG.
I have this CSS specified where it should show a red circle with a black outline.
#toplevel_page_ContactSupport2 .dashicons-admin-generic:before {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%204.233%204.233%22%3E%3Ccircle%20cx%3D%222.117%22%20cy%3D%222.117%22%20r%3D%222.043%22%20fill%3D%22%23c60000%22%20stroke%3D%22%23000%22%20stroke-width%3D%22.147%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
}
However, the resulting CSS on the child site comes through with invalid formatting
#toplevel_page_ContactSupport2 .dashicons-admin-generic::before {
background-image: url('data:image/svg+xml; charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%204.233%204.233%22%3E%3Ccircle%20cx%3D%222.117%22%20cy%3D%222.117%22%20r%3D%222.043%22%20fill%3D%22%23c60000%22%20stroke%3D%22%23000%22%20stroke-width%3D%22.147%22/%3E%3C/svg%3E'):;
background-repeat: no-repeat;
}
Note the invalid :; at the end of the background-image property and it’s also missing the background-repeat property entirely.
This also happens when using a PNG like below
#toplevel_page_ContactSupport2 .dashicons-admin-generic::before {
background-image: url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABBUlEQVQ4jaXTv0pCARTH8c8jGD6B2HYHQVxUSIIKXBx6AQeHdAtqrUXXxKleIB9AnMSlljsKLg3SZm/gA9yG7o3sGnjtwG8739/5wzmkoxrQrzBpErZY1JkFDFDdkf8duTy9Nssx0ZwojDUnGhN1WRe5RS4Fl5k+sAl/gLs0IiozxdE3XeRmHzjRkE3cydfMbZb7wok6rFAT0B9nhMN4JwEDFSbzAwzmRDVmWiyywonOeNckPNSgxeJfIzR4leP60CWe8ATVDqusBl3WBc5Bnt4oAzxkU+J+65SPed7HZMgmdcqJSYm7Kz7+eqYOq7hyCt565waPdWYtFpe8nfISMChw8Tv5E5VPSbhvFsnSAAAAAElFTkSuQmCC'):;
background-repeat: no-repeat;
}
If you remove the : using developer tools the svg is displayed.
Is there anyway I can get this working?
Cheer,
Dave.