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
