Archived topic
Turn Bullet Points into Checkmark Image
5 replies · Started by Mirjam on November 16, 2020
Hi,
I have seen the other post about checkmark images, but I don't know how to use it.
How can I turn the bullet points to checkmarks on my page:
https://lichtyogacoaching.nl/bij-herstel-en-behandeling/
I don't have any experience with using CSS.
Kind regards,
Mirjam
Hi there,
try adding this CSS to your site:
.entry-content ul {
list-style-type: none;
}
.entry-content ul li {
position: relative;
}
.entry-content ul li:before {
content: "\2713";
position: absolute;
left: -25px;
font-weight: bold;
color: #036736;
}Hi David,
Where can I add this to my site? Can you tell me how?
Kind regards,
Mirjam
Go to Customizer > Additional CSS and paste the code above the other code you have in there.
Hi David,
I can see the checkmarks, but now all the bulletpoints turned into checkmarks. I would like to use the checkmarks only on certain lists and not all of them.
Is this possible?
Kind regards,
Mirjam
Of course, select the List Block in the post editor, go to the settings sidebar > Advanced --> Additional CSS Class(es) and add this: check-list
Then add this CSS:
.entry-content ul.check-list {
list-style-type: none;
}
.entry-content ul.check-list li {
position: relative;
}
.entry-content ul.check-list li:before {
content: "\2713";
position: absolute;
left: -25px;
font-weight: bold;
color: #036736;
}