Add Checkmark Glyph to Selected Item

I’d like to use Bootstrap’s glyphs to add a checkmark over the selected Product Color on this page. I’ve tried using this:

.woof_color_term.checked::after {
    content: "\e013";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #333;
}

But I can’t seem to get it to appear above the selected background color.

One of the parent elements (.woof_color_term {} in color.css) has font-size: 0 set on it, meaning this pseudo element inherits that zero font size. So you need to add a font size back in. E.g. —

.woof_color_term.checked::after {
    content: "\e013";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #333;
    font-size: 16px;
}
2 Likes

Ahh… I missed that. I see that now.

Thank you for your eyes, ralphm!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.