Want to add SVG icons in the widget list

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

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?

Hi Sankalan,

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

You can use the private information field.

Let me know :)

Yes, the details are in the private information segment.

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

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;
}

Ying,

It was so perfect! Thanks!

You are welcome :)

Ying,

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

What code do I use?

Thanks,
Sankalan

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");
}

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");
}

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");
}

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

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.

Wow! That worked great! Thanks, Elvin.

No problem. :)