Archived topic
Replace bullet with checkmark
10 replies · Started by Henk on December 8, 2021
Hello,
I would like to replace the bullets with a checkmark.
But the following code doesn't work, nothing happened.
Can you find the error?
ul.chechmarkhenk {
list-style: none;
}
ul.chechmarkhenk li {
position: relative;
}
ul.chechmarkhenk li::before {
content: “\2714 \fe0e”;
color: #228B22;
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
}
Thanks,
Henk.
Hi there
Can you disable autoptimize and any other cache/optimization plugins so i can see whats going on?
I disabled Autoptimize and Async, this are the only caching tools.
The cache at Kinsta, is also reset.
Unfortunately, no change.
I included in the private section the user credentials.
Feel free to have look or try things out.
Hi Henk,
The class is checkmarkhenk2,
try this CSS:
ul.checkmarkhenk2 {
list-style: none;
}
ul.checkmarkhenk2 li {
position: relative;
}
ul.checkmarkhenk2 li:before {
content: '\2714 \fe0e';
color: #228B22;
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
}
Hi Yin,
Thanks!!
Problem is solved.
Am I correct that the only changes are:
* :before instead of ::before
* the single quotes instead of double quotes?
The class namen was changed in the mean time, because I was debugging.
Kind regards Henk.
Oh, one more thing.
To change the color, that does not work!?
I changed it to: color: #3399cc;
But no success, the color is still a strange purple color.
Any idea?
Can you link me to the site again? As it's marked as resolved, the info has been erased.
Sure. See the private section.
The color looks correct to me - see here:
https://www.screencast.com/t/vxhl1llm
Maybe the browser cache needs clearing ?
The fundamental change that Ying made in her CSS was the CSS Class Name.
In your original CSS you were using chechmarkhenk whereas the class name on the element ( as noted in the screenshot is ) chechmarkhenk2
Hi David,
Ow yes. I cleared all caches (at the provider and in Wordpress), used incongito modus, changed the name of the CSS class, as you noticed. But forgot to clear the browser cache.....
Thanks!
Glad we could be of help!