Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Iconlist

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

    While 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   🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.