-
Hi,
Trying to use icons with lists.I add custom icon with pseudo element and use mask to replace them. For some icons it works but for others not? Would appreciate if you could take a look.
/* Remove default list marker */ ul.c-iconlist { list-style-type: none; margin-left: var(--space-xl); } /* Style list items */ ul.c-iconlist li { position: relative; padding-left: var(--space-xl); font-size: var(--text-body); } /* Add custom icon with pseudo-element */ ul.c-iconlist li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--text-body,2rem); height: var(--text-body,2rem); background-color: var(--accent,#4285f4); /* Use the accent color */ mask: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/></svg>"); mask-repeat: no-repeat; } ul.c-iconlist--plus li::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23000000'%3E%3Cpath fill='%23000000' d='M24,1C11.3,1,1,11.3,1,24s10.3,23,23,23s23-10.3,23-23S36.7,1,24,1z M34,25h-9v9c0,0.6-0.4,1-1,1s-1-0.4-1-1 v-9h-9c-0.6,0-1-0.4-1-1s0.4-1,1-1h9v-9c0-0.6,0.4-1,1-1s1,0.4,1,1v9h9c0.6,0,1,0.4,1,1S34.6,25,34,25z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } ul.c-iconlist--thumbs-up li::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23de9f2b' stroke-linecap='square' stroke-linejoin='miter' transform='translate(0.5 0.5)' stroke-miterlimit='10'%3E%3Cpath d='M10,25,18,2s5,0,5,6V19H41a3.979,3.979,0,0,1,3.037,6.575,3.973,3.973,0,0,1-.722,7.186,3.984,3.984,0,0,1-2.245,6.076A2.994,2.994,0,0,1,39,44H23a27.145,27.145,0,0,1-13-3' fill='none' stroke='%23de9f2b' stroke-width='1' stroke-linecap='butt'%3E%3C/path%3E %3Crect x='2' y='21' width='8' height='22' rx='2' ry='2' fill='none' stroke='#de9f2b' stroke-width='1'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E"); }
.c-iconlist works, .c-iconlist–plus and .c-iconlist-min work too. But .c-iconlist–check, .c-iconlist–checkbox, .c-iconlist–thumbs-down and .c-iconlist–thumbs-up don’t work.
-
Hi there,
It should be related to the SVG itself.
When I check the
c-iconlist c-iconlist--check
, the SVG is broken:
https://app.screencast.com/GHSftg9t6V082While the working list has the working SVG:
https://app.screencast.com/0tzs4dWmhBi69 -
I’m using Nucleo to get the data uri for the icons. But as you showed it somehow get to a broken svg.
Tested out different settings in the Nucleo app but gave up. I just copied the svg code and converted it to base64 encoded css. It works now.
Thanks for your help.
-
You are welcome 🙂
- You must be logged in to reply to this topic.