How to show a closed padlock to the left of post titles

Hi there,

Can you link me to the page where these posts are viewable? It depends on whether the posts themselves have a class assigned to them with the taxonomy you're trying to target. Which taxonomy is the target?

I should be able to write up some CSS to do this :)

Hi Tom,

That would be so great. :)

I added the Link (only admin can see).

.htaccess protection credentials:

User: uz
Password: Tester2020skJOP!

Thank you.

Where on that page can I see this?: https://prnt.sc/qp4toi

I'm not seeing it at the moment.

Let me know :)

If you open the link I posted (only admin can see) ...

https://prnt.sc/qp4toi
This is the entry post title of that post.

Not visible for you?

Can you disable any caching/minifying plugins, for now? Your site doesn't seem to have any CSS applying to it right now, so it's just a big white page.

That' s odd. I just disabled every caching plugin …

Could you also please try another browser?

I'm seeing it now :)

So, you're currently adding "Plus" using a pseudo selector.

Do you have the lock icon as an icon font or an SVG? It might be difficult to achieve, as you're already using the pseudo on the Plus.. If we include the icon font with the "Plus", they will be the same color..

We could apply the "Plus" to the <a> pseudo selector instead, and then using the <h2> pseudo for the lock?

So, you’re currently adding “Plus” using a pseudo selector.

Yes, David helped to archive that:
https://generatepress.com/forums/topic/post-badges-wp-show-posts/

We could apply the “Plus” to the <a> pseudo selector instead, and then using the <h2> pseudo for the lock?

This sounds like a good solution for us.

Many thanks in advance. :-)

Something like this should work:

body:not(.single) article[class*="post-badges"] h2 a:before, 
body[class*="badge-"] h1 a:before {
    float: left;
    color: #fff;
    padding: 0 7px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 3px 10px 0 0;
    font-size: .6em;
    letter-spacing: .7pt;
    line-height: 1.7;
    content: 'Plus'!important;
    background-color: red;
}

body:not(.single) article[class*="post-badges"] h2:before, 
body[class*="badge-"] h1:before {
    content: "lock";
    color: #000;
}

body:not(.single).logged-in article[class*="post-badges"] h2:before, 
body[class*="badge-"].logged-in h1:before {
    content: "unlock";
}

You'll just need to replace the "lock" and "unlock" with the font icons.