Change the Images Overlay Icon

This topic has 17 replies, 2 voices, and was last updated 7 years, 1 month ago by Tom.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
July 28, 2016 at 11:05 pm #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

July 28, 2016 at 11:39 pm #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 */
}
```
July 28, 2016 at 11:54 pm #326

Michael
Participant

Tom,

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

MM

July 29, 2016 at 12:14 am #332

Michael
Participant

Tom,

Actually I am only getting a square.

MM

July 29, 2016 at 10:29 am #335

Tom
Keymaster

Hmm, that should work.

Can you link me to the page?

July 29, 2016 at 11:18 am #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

July 30, 2016 at 8:47 am #339

Tom
Keymaster

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

August 5, 2016 at 8:58 am #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

August 5, 2016 at 10:44 am #452

Tom
Keymaster

Ah I see, can you try my adjusted code above?: https://wpshowposts.com/support/topic/change-the-images-overlay-icon/#post-324

August 5, 2016 at 11:06 am #455

Michael
Participant

I am using the code.

August 5, 2016 at 11:10 am #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?

August 5, 2016 at 11:11 am #457

Michael
Participant

Just deleted the cache.

August 5, 2016 at 11:12 am #458

Michael
Participant

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

August 5, 2016 at 11:13 am #459

Tom
Keymaster

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

August 5, 2016 at 11:16 am #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 */
}
Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Change the Images Overlay Icon