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>")
18 comments
Daniel
Lil' tip: don't forget to add position: relative to the li, otherwise the li::before won't be visible
Dariusz Dominczak
It works, thanks. Is there a way to change the icon's fill colour in the generated CSS? Here is my CSS:
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23000000' fill='none'%3E%3Cpath opacity='0.4' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z' fill='currentColor' /%3E%3Cpath d='M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.3151 21.9311 10.6462 21.8 10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' /%3E%3Cpath d='M8 12.5C8 12.5 9.5 12.5 11.5 16C11.5 16 17.0588 6.83333 22 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E")
Gagan
Hi, I tried doing this and this is what the result is.
https://codepen.io/gagandeepgill/pen/JjzGLya
Sridhar Katakam
Add position: relative; to ul.brxe-list li.
Drew
How can you vertically center the text and the svg together?
Sridhar Katakam
Can you share the page URL where you implemented this?
Caner
it works thanks.
Note: export your svg file 512x512px if you need to add your custom icon
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?