[Support request] Overlay icon for post images

[Roman]

Hi Tom, this may be a little bit off topic, but it would be awesome if you could help. I just wonder how to easily display an optional fontawesome icon overlay over any ordinary post image using a custom class only (always visible, not just on hover).

[Leo]

Hi there,

Like the featured image? on main blog or single posts?

Depending on where you have it set, page header add-on might be an option?

Let me know.

[Roman]

Hi Leo,

I would like to have the fontawesome icon displayed over images (for example in the top right corner) that I have previously set with some custom CSS class while adding the images in the post from media dialog. Particular CSS properties can be set in the stylesheet, it is sufficient for me.

I think it may be achievable with :before :after elements.

I hope I am clear now.

[Tom]

Without knowing more specifics it’s hard to give specific CSS.

You could probably do this:

<div class="image-container">
    <img src="URL TO IMAGE" alt="" />
</div>

Then your CSS:

.image-container {
    position: relative;
}

.image-container img:after {
    font-family FontAwesome;
    content: "\f2cd";
    position: absolute;
    top: 5px;
    right: 5px;
}

[Author]

Posts