Image bullets for list items in HTML

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>
</ul>

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:

ul.green-tick {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.green-tick 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