Add this sample CSS:
ul.brxe-list {
list-style: none;
padding-left: 0;
}
ul.brxe-list li {
padding-left: 1.5em;
margin-bottom: 0.5em;
}
ul.brxe-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' class='svg-inline--fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%2315aabf' 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'></path></svg>");
}Replace brxe-list with the class of your ul element.
Here’s how you can generate the value of background-image property:
Copy your SVG’s HTML (open the .svg file in a code/text editor to view the HTML) and paste it in the URL-encoder for SVG page in the “Insert SVG” field.
Click “Copy” of the “Ready for CSS:” field.
Paste it in the above code replacing:
background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' class='svg-inline--fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%2315aabf' 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'></path></svg>")
11 comments
Tobias
Sorry, I am a noob.
After adding the css you mentioned, how should I refer to it in the html?
Is it like this:
test
Sridhar Katakam
https://gist.githubusercontent.com/srikat/38c27f8aa49442331ef03b464885a5bf/raw/8a34e7f189d4feb6831efb52821600e7bdad1524/gistfile1.txt
Ivan
Hello.
Im duplicating the comment again, because I didnt inserted the links properly.
I'm trying to add SVG icon as list item bullets
I followed your tutorial but for me is not working.
here is the website: https://eduonline.one/test-bullets/
I'm using WPCode box with those settings: https://drive.google.com/file/d/1dQUuQSwjmni2hWTm0P3Nar728Sf1gGRc/view
Here is the code which I inserted:
ul.brxe-aoegwo {
list-style: none;
padding-left: 0;
}
ul.brxe-aoegwo li {
padding-left: 1.5em;
margin-bottom: 0.5em;
}
ul.brxe-aoegwo li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-image: url("https://eduonline.one/wp-content/uploads/2022/09/done-button.svg%22);
}
Could you help me please?
Oscar Obians
Its not working for me. I'm still getting the disc bullet.
URL: https://labotana1.wpengine.com/
Sridhar Katakam
Are you referring to this? https://d.pr/i/MfuG6R
If so, it seems to be fine?
Oscar Obians
Yes. Its another of those moments where I found the fix just after calling for help 🙂 Thanks for this article.
Sridhar Katakam
Hi Ivan. Looks like you managed it? I see the icons on your page.
Ivan
I'm trying to add SVG icon as list item bullets
I followed your tutorial but for me is not working.
here is the webiste: https://eduonline.one/test-bullets/
Im using WPCode box with those settings: https://drive.google.com/.../1dQUuQSwjmni2hWTm0P3Nar.../view
Here is the code which I inserted:
ul.brxe-aoegwo {
list-style: none;
padding-left: 0;
}
ul.brxe-aoegwo li {
padding-left: 1.5em;
margin-bottom: 0.5em;
}
ul.brxe-aoegwo li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-image: url("https://eduonline.one/wp.../uploads/2022/09/done-button.svg");
}
Could you help me?
Kareem
Can I target Text List in Meta Box with this?
Text List > > Inputs " Label " > Cloneable!
Aljaz Bizjak
Tried that, but only the first icon gets shown.
Sridhar Katakam
URL?