Here you go mate, updated the codepen.
Only bit to change (if you want) is to make the background-image url relative, rather than absolute.
Basically, when dealing with before it has to have a content: “”; line otherwise it won’t load.
By default with content: “”; it’s empty so will collapse into nothing. So you need to add height/width to it to make it work as well as a display parameter.
You can do custom images in lists using list-style-image instead, but I find using :before easier on my brain as it’s like a mini element, rather than having to tear your hair out trying to get padding, line height and margins all perfect. So using :before it’s in it’s own little area in your style sheet instead.