Using the Icon List Block

  • Resolved kendawes

    (@kendawes)


    4 years, 2 months ago

    Firstly, congratulations on a great set of Gutenberg Blocks! I love the flexibility!

    But I do have a question about the Icon List Block. How can I adjust the spacing between between the icon and the first letter of the list item?
    I’ve looked at in with DevTools and it looks overly onerous to tweak the CSS on a case by case basis. Is there a setting I’m missing?

    Also… Will you be adding more icons to the Icon List Block? Soon??

    If not, how can I add my own… I know that they’ll disappear when there’s a plugin update. In the immediate term, my client wants a checkmark, which you have. But he doesn’t like the checkmark you have and really wants a heavier weight sort of checkmark.

    I look forward to you adding more blocks to the plugin!! Like Columns and your own take on the Classic Text Block, etc. would be fantastic!

Viewing 1 replies (of 1 total)
  • Plugin Contributor gambitph

    (@gambitph)

    4 years, 2 months ago

    Thanks for supporting Stackable!

    Unfortunately, we currently don’t have a way to adjust the space between the List Text and the List Icons. I’ll add this to our list of suggestions and look at what we can do about this in the future.

    Uploading your own SVG for the Icon List is already in our to-do list. We will try to include this for future releases. In the meantime, you can override the SVG by tweaking some CSS. You’ll have to convert the SVG into inline base64 for this. You should end up with some Custom CSS like this:

    ul li {
    background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkwIDE5MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTczLjggMjguNEw2MC40IDE0MS44IDE1LjcgOTcuMiA1LjEgMTA3LjggNjAuNCAxNjNsMTI0LTEyNC0xMC42LTEwLjZ6Ij48L3BhdGg+PC9zdmc+')
}

    Then customize every list entry:

    ul li:first-child {
    background-image: ...;
}
ul li:nth-child(2) {
    background-image: ...;
}
ul li:nth-child(3) {
    background-image: ...;
}

    Actually, Columns and Text blocks are already in our things/blocks to do, since they are being requested by a lot of people, but no release date yet. We’ll announce in our newsletter when these blocks are already available 😊

    Resolving this ticket, please re-open if needed.

Viewing 1 replies (of 1 total)
  • The topic ‘Using the Icon List Block’ is closed to new replies.