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.
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.
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.
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
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.