[Support request] Want to add SVG icons in the widget list

Home Forums Support [Support request] Want to add SVG icons in the widget list

Home Forums Support Want to add SVG icons in the widget list

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1669459
    Sankalan

    Hi there,

    Please check this image:

    https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/2345.jpg

    I want to use the icon next to the continue reading button in the list showing on widgets in both sidebar and footer.

    Is that possible?

    The icon is an SVG icon that I added using CSS. There is a similar way of adding the icon to the lists in widgets using CSS?

    Also, is it possible to add icons next to the widget titles as well?

    Thanks in advance.

    Best Regards,
    Sankalan

    #1669492
    Sankalan

    Okay, I managed to add icon next to widget title, but cannot figure out how to add icons to the list.

    #1669531
    Sankalan

    I managed to get the icon using something like this in front of the text in the widget:

    <span class=”wp-block-image size-large is-resized”></span>

    Is that an ideal thing to do?

    #1669538
    Ying
    Staff
    Customer Support

    Hi Sankalan,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1669580
    Sankalan

    Yes, the details are in the private information segment.

    Note: It is a staging site with password protection turned off.

    #1669605
    Ying
    Staff
    Customer Support

    I think using Pseudo element is a good way which is what you’ve done for the Read more button.

    For the widget lists, you could try this CSS:

    .textwidget p:before {
        display: inline-block;
        vertical-align: -0.15em;
        margin-left: .25em;
        content: ' ';
        background-image: url(https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/add-button-color.svg);
        background-size: 17px;
        width: 17px;
        height: 17px;
        margin-right: 10px;
    }
    #1669745
    Sankalan

    Ying,

    It was so perfect! Thanks!

    #1669781
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

    #1670179
    Sankalan

    Ying,

    What happens if I want the same result for widgets using a bullet list?

    What code do I use?

    Thanks,
    Sankalan

    #1670211
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m not exactly sure I fully get what you mean. Can you specify which bullet list?

    If you’re pertaining to ordered/unordered list elements you have to use the list-style-image property.

    Example:

    ul, ol {
      list-style-image: url("https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/add-button-color.svg");
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1670258
    Sankalan

    Elvin, yes, that is what is meant- ordered/unordered list. However when I add the code, the image icon is too small. This is what happens: https://prnt.sc/105huv8

    Here is the code I added:

    .widget ul, ol {
    margin-left: 22px;
    list-style-image: url(“https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/add-button-color.svg&#8221;);
    }

    Adding width and height parameters break it.

    This is the CSS with width and height:

    .widget ul, ol {
    margin-left: 22px;
    width: 17px;
    height: 17px;
    list-style-image: url(“https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/add-button-color.svg&#8221;);
    }

    And this is the end result: https://prnt.sc/105hxet

    #1670268
    Elvin
    Staff
    Customer Support

    Ah right, if that’s the case, let’s try this:

    .widget ul li:before, .widget ol li:before {
        display: inline-block;
        vertical-align: -0.15em;
        margin-left: .25em;
        content: ' ';
        background-image: url(https://wordpress-544246-1760074.cloudwaysapps.com/wp-content/uploads/2021/02/add-button-color.svg);
        background-size: 17px;
        width: 17px;
        height: 17px;
        margin-right: 10px;
    }

    .widget ol li:before on the list of selectors is optional. If you want to keep a.) b.) c.) or 1.) 2.) 3.), don’t include it.

    A wise man once said:
    "Have you cleared your cache?"

    #1670280
    Sankalan

    Wow! That worked great! Thanks, Elvin.

    #1671410
    Elvin
    Staff
    Customer Support

    No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

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