I'm trying to add a custom bullet using CSS list-style-image. Here is the attribute:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/></svg>");

For convenience, this is the SVG file that is embedded in the list-style-image:

<?xml version='1.0' encoding='utf-8'?>
<svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'>
    <path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/>

The problem is, when I try to add a fill attribute to <path>, the whole thing seems to break, as the SVG stop showing up as a bullet (the default ul circle bullet shows). I've tried using both fill='#f00', style='#f00' and stroke='#f00'. All of them breaks the SVG.

Any idea what might be the problem?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.