I am trying to change my bullet icons into checkmarks…

[RossSpark]

I am trying to follow this tutorial http://boylesoftware.com/blog/css-checkmark-icon/ in case you don't want to click the link I also uploading the screenshots of the website on imgur here http://imgur.com/a/CQBpy Now, I have tried everything that this website has told me but it has not worked for me yet. Then I seen something about : Custom Body Class and Custom Post Class in the layout settings near the bottom of the post editor. Now I also tried inserting my code there as well with no luck! I am missing something and I can't figure out what...help

[Victor Font]

Please link to a page where you have an example unordered list.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[RossSpark]

@vfontjr Here's the link, I have an unordered list underneath the first paragraph:

https://www.thesolaradvantage.net/solar-string-lights/

[Victor Font]

The tutorial code works perfectly on your site. I just applied it and tested with my browser's inspection tool.

You have to add the checkmark class to the list on the page. You can't do this with the visual editor. You have to use the editor's text tab to add the class. When you are done, the HTML for the unordered list will be:

<ul class="checkmark">
    <li>Modes of Operation</li>
    <li>Working Time</li>
    <li>Product Specs(Length,LED Count,Light Color)</li>
    <li>Accessories Included</li>
    <li>Warranties</li>
    <li>Weatherpoofing</li>
</ul>

Next, add the three CSS blocks to style.css just before the media queries.

ul.checkmark li {
    font-size: 16px;
    list-style-type: none;
    padding-left: 2.5em;
    position: relative;
}

ul.checkmark li::before {
    content: " ";
    display: block;
    border: solid 0.8em #660a5e;
    border-radius: .8em;
    height: 0;
    width: 0;
    position: absolute;
    left: 0.5em;
    top: 40%;
    margin-top: -0.5em;
}

ul.checkmark li::after {
    content: " ";
    display: block;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
    position: absolute;
    left: 1em;
    top: 40%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

This code produces a white check mark in a purple circle.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[MJAY]

This reply has been marked as private.

[Author]

Posts