[Resolved] Turn Bullet Points into Checkmark Image

[Mirjam]

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

[David]

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;
}

[Mirjam]

Hi David,

Where can I add this to my site? Can you tell me how?

Kind regards,
Mirjam

[David]

Go to Customizer > Additional CSS and paste the code above the other code you have in there.

[Mirjam]

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

[David]

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;
}

[Author]

Posts