Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Overlay icon for post images

Home Forums Support Overlay icon for post images

  • This topic has 3 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #426965
    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).

    GeneratePress 1.4
    #427125
    Leo
    Staff
    Customer Support

    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.

    #427308
    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.

    #427598
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.