How to add SVG icon as list item bullets

svg-icons-list-item-bullets

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>")
Get full access to all 220+ Bricks tutorials with BricksLabs Pro

6 comments

  • 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?

  • 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?

  • 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.

Leave your comment