Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Change the Images Overlay Icon

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Change the Images Overlay Icon

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #321
    Michael
    Participant

    Hi,

    How can I change the Images/Images Overlay Icon with an icon from Font Awesome (my theme has FA)?

    Thanks,
    Michael Mancini

    #324
    Tom
    Keymaster

    You can do something like this:

    .wp-show-posts-image-overlay:not(.no-icon):before {
        font-family: FontAwesome !important;
        content: "\f0e7" !important; /* replace with the unicode you want to use */
    }
    • This reply was modified 4 years, 3 months ago by Tom.
    #326
    Michael
    Participant

    Tom,

    For some reason it is not working for me. Could you give me the CSS for fa-search?

    MM

    • This reply was modified 4 years, 4 months ago by Michael.
    • This reply was modified 4 years, 4 months ago by Michael.
    • This reply was modified 4 years, 4 months ago by Michael.
    • This reply was modified 4 years, 4 months ago by Michael.
    • This reply was modified 4 years, 4 months ago by Michael.
    #332
    Michael
    Participant

    Tom,

    Actually I am only getting a square.

    FA

    MM

    • This reply was modified 4 years, 4 months ago by Michael.
    #335
    Tom
    Keymaster

    Hmm, that should work.

    Can you link me to the page?

    #338
    Michael
    Participant

    Hi,

    I am working locally right now but as soon as I get it live I will re-visit this. It will be about a week or so. I can use it the way it is for now.

    Thanks,
    -Michael

    #339
    Tom
    Keymaster

    Sounds good – let me know when it’s live 🙂

    #448
    Michael
    Participant

    Tom,

    The site is live and the CSS has been inserted on that page only at http://www.steffaniecanto.com/gallery-test/ The CSS is located at Tools/Layout/CSS Javascript and I am still getting the square instead of the icon I have inserted with the unicode f002. If you need login info let me know how to send it privately.

    Thanks,
    MM

    #452
    Tom
    Keymaster
    #455
    Michael
    Participant

    I am using the code.

    #456
    Tom
    Keymaster

    I’m not seeing the change I made to it live on your site.

    Can you try clearing any caching plugins you might have?

    #457
    Michael
    Participant

    Just deleted the cache.

    #458
    Michael
    Participant

    I get the square on Chrome, nothing on Safari and the unicode in a square on Firefox.

    #459
    Tom
    Keymaster

    Did you update the code with the change I made above? It looks like you’re still using the original code.

    #460
    Michael
    Participant

    I only see one post with code in it.

    .wp-show-posts-image-overlay:not(.no-icon):before {
    font-family: FontAwesome !important;
    content: “\f0e7” !important; /* replace with the unicode you want to use */
    }

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.