#129350 CSS List symbol

Landing Forums Jupiter WordPress Theme CSS List symbol

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Rick Hendrix

    Hi,

    I need to change the default list-bullit into the mk-icon-check.
    I know how to do this when using custom list, but because the list is part of a toggle, i can’t use that option.

    So i was wondering if this could be done with css, and if so; what would the css be?

    Amir Rather Support Team

    Hi There

    This can be done with Custom JS code, select an Icon from the Jupiter Icon List in Control panel and provide the Login details we will provide the JS code for you.

    Regards

    Private
    Rick Hendrix
    This reply has been marked as private.
    Amir Rather Support Team

    I added the below CSS and JS code please check now:

    .vc_toggle_content ul li svg {
        padding-right: 5px;
    }
    .vc_toggle_content ul li ::marker {
        color: transparent;
    }
    
    jQuery('.vc_toggle_content ul li').prepend('<svg class="mk-svg-icon" data-name="mk-icon-check" data-cacheid="icon-611fbf1492367" style=" height:16px; width: 16px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"></path></svg>');
    Private
    Rick Hendrix
    This reply has been marked as private.
    Alexander Hutsol Support Team

    Hello,

     

    Please also add this css code:

    .vc_toggle_content li {
    list-style: none;
    }
    .vc_toggle_content ul li svg {
    fill: #89c441;
    }

    Regards.

    Rick Hendrix

    Great fix!

    Alexander Hutsol Support Team

    You’re welcome!

    Regards.

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