AdBlock blocking Font Awesome icons

[ca2450]

Support,

I am using Font Awesome icons in my header and the social icons in my footer. While they show on my screen, they do not show on my clients screen. We have discovered that Adlock is the issue.

Is there a work around for these icons to display while AdBlock is active?

Thanks,
Charles

[basanta]

Hi @ca2450,

Thanks for writing in!

Look like Adlock is blocking the font awesome fonts. There is nothing to do with the theme side.
I would suggest you, please ask Adlock support for a solution.
They might have solutions for this.

Thanks for understanding!

[ca2450]

What if I were to upload icons and use css to place them? Does X theme allow images in header?

i.e.

[paul.r]

Hi,

Yes, you may change the icons into image then replace your navigation label icon code with image code.

eg.

<img src="http://yoursite.com/facebook-icon-png">

Hope this helps

[ca2450]

Thanks, I was able to implement that.

What would the code be to have a different/second image of different color appear on hover?

[ca2450]

Just give it a class and use the code below?

.element {
background-image: url(your-image.png);}

.element:hover {
background-image: url(your-image-hover-version.png);}

[jade]

Hi there,

Yes, you may add a class to the menu item them use this code:

.x-navbar .desktop .x-nav>li.the-menu-item-class a:hover img {
    content: url(http://imgur.com/SZ8Cm.jpg);
}

Please change the the-menu-item-class to the class you have added to the menu item and the URL of the image in the code.

Hope this helps.