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
Comments
Provide a URL of your site/webpage if something is not working.
11 comments on “Image bullets for list items in HTML”
Hi I am using this tutorial to add a check mark but it looks like the bottom layer gets cut off: https://i.imgur.com/g1Srbvk.jpg
CSS
“`ul.green-tick {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.green-tick li {
background: url(http://popbowl.wpengine.com/wp-content/uploads/2018/11/CHECK-SMALL.png) no-repeat left top;
background-size: 40px 40px;
padding-left: 60px;
margin-bottom: 20px;
}“`
HTML PHP
Packaging today offers no room to properly toss your salad.
Dressing will typically sink to the bottom of the bowl and not evenly coat your meal.
Other salad storage methods are a one use system.
Actually i went through and added styling and my headers: and now the first check mark and last check are being cut off at the bottoms: https://imgur.com/a/NFJCZMi
HTML
<ul class="green-tick">
<h1>Ingredient Overflow</h1>
<li>Packaging today offers no room to properly toss your salad.</li>
<h1>Spotty Dressing Distribution</h1>
<li>Dressing will typically sink to the bottom of the bowl and not evenly coat your meal.</li>
<h1>Environmentally Harmful</h1>
<li>Other salad storage methods are a one use system.</li>
</ul>
CSS
ul.green-tick {list-style-type: none;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
text-align: left;
}
ul.green-tick li {
background: url(http://popbowl.wpengine.com/wp-content/uploads/2018/11/CHECK-SMALL.png) no-repeat left top;
background-size: 40px 40px;
padding-left: 60px;
margin-bottom: 20px;
}
h1 {
margin: 0;
padding: 0;
text-align: left;
font-size: 16pt;
padding-left: 60px;
margin-bottom: 5px;
color: #1d6835;
font-family: 'Roboto', sans-serif;
Thank you for any tips you are able to give!
Simple. Add top and bottom padding of say, 10px to
ul.green-tick li. Adjust the padding values to your liking.Thank you so much! that completely fixed the issue! I will need to brush up on my CSS skills soon 😀
Yikes I am having a devil of a time making these code blocks responsive: please take a look at this & let me know if there is anything I can do to align it: http://popbowl.wpengine.com/?page_id=17
I attempted to change the screen icon in the sidebar panel to smaller display sizes but it is not saving that progress, would this be a custom css fix?
I brought up dev tools in Google Chrome and reduced the width of the browser and it looks fine to me.
Can you show a screenshot of the problem?
Here is a photo of the point I am mentioning: https://imgur.com/WkXrND6
Do you want the text to wrap around the image?
Hi Sridhar – Thank you so much for being incredibly helpful – I am wanting the photo to match the height of the codeblocked text – It looks fine on smaller screens since i have the columns stacking vertically – but in the screenshot the size of the image & the text is so different – just curious if there was a way to remedy this.
There is no proper solution to this – be it Oxygen or otherwise.
This may be the most feasible way:
Instead of showing the image as an embedded
<img>element, we could set it as a background for a div that has the same height as the right side code block and usebackground-size: coverfor the background image so it stretches out and fills the div.Hi – I played around with a few options but when I go to option #4 the vertical stack happens too early – http://popbowl.wpengine.com/?page_id=87
I feel like i am really close but just a little off.