Published on Oct 2, 2018

Image bullets for list items in HTML

Sridhar Katakam

This tutorial provides the steps to replace the default circular bullets with a green tick image for list items of an unordered list in Oxygen.

Step 1

Inside the Oxygen editor, add a Code Block element having this sample code in the PHP & HTML tab:

<ul class="green-tick">
<li>Step-by-step tutorials</li>
<li>Videos and screencasts where needed. Conveniently incentivize corporate leadership before open-source alignments.</li>
<li>Members-only forum</li>

Replace the text with your own.

Step 2

Upload this image (mirror) or your desired image that you want to use as the list items’ bullets to your WordPress Media Library and note the URL.

Step 3

In the CSS tab of the Code Block, paste: {
list-style-type: none;
margin: 0;
padding: 0;
} li {
background: url(https://oxygen.test/wp-content/uploads/2018/10/green-tick.png) no-repeat left top;
background-size: 40px 40px;
padding-left: 60px;
margin-bottom: 20px;

Replace https://oxygen.test/wp-content/uploads/2018/10/green-tick.png with the URL of your image.

Adjust the background-size and other values as needed.

That’s it!

Credit: By gmaxwell (Derived from Yes check.svg by Gregory Maxwell) [Public domain], via Wikimedia Commons