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=''><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=''>
    <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>

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?

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/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/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>

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?

• theme-development
• css
• svg

2 Answers 2

For base64 you need to replace # with %23 when writing the color value.

Example: to add a #f00 fill, you write fill='#f00' for inline svg, but fill='%23f00' for base64 inline svg.

So your svg code with fill will be:

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/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' fill='%23f00'/></svg>");
}

Here is a solution that allows you to control the SVG color directly in CSS.

ul {
    list-style: none; /* Remove default bullet */
    padding: 0;
}

ul li {
    position: relative;
    padding-left: 30px; /* Space for icon */
}

ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: red; /* <-- SET SVG COLOR */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 1792 1792"><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>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 1792 1792"><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>');
}