Class and colors

Support
#1

Hi there.

Since the latest update something is not working right related to coloring the social media buttons on hover in my footer. It doesn’t display as I would expect according to the following css.

.icon {
border-radius: 0;
cursor: pointer;
display: inline-block;
height: 32px;
margin: 0 -.5em;
-webkit-transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out;
-o-transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out;
transition: background-color .5s ease-out, border-radius .5s .25s ease-out, margin .5s .25s ease-out;
width: 3px;
color: #ffffff;
}

.icon.first {
border-bottom-left-radius: 1em;
border-top-left-radius: 1em;
margin-left: 0;
}
.icon.last {
border-bottom-right-radius: 1em;
border-top-right-radius: 1em;
margin-right: 0;
}

.icon:hover {
background-color: #ffffff;
color: #000000;
}

Please see attached image and advise. Thanks.

#2

Hi @nblund,

Thanks for reaching out.

The new update contains FontAwesome 5.0 which older custom code will no longer work. I recommend changing the icon attribute of your code please check this https://theme.co/apex/forum/t/some-font-awesome-icons-in-menu-and-header-disappeared-after-pro-latest-update/43979/2

Example is from

<i class="x-icon-facebook" data-x-icon="" aria-hidden="true"></i>

to this

<i class="x-icon-facebook" data-x-icon-b="&#xf09a" aria-hidden="true"></i>

You’ll find the icon codes here https://fontawesome.com/icons/facebook?style=brands (example is f09a for facebook).

Thanks!

#3

Hi there. So I changed the code to respectively …



As you will see, something else is wrong… Please advise.

For your information, the original code was:

<div class="mhcsocialshare">

<a href="http://twitter.com/share?text=Bæredygtige boliger&url=http://mohocon.com&hashtags=huse,byggeri,bæredygtighed,arkitektur,design" class="icon first" class="twitter" title="Twitter" target="_blank"><i class="x-icon" data-x-icon-b="&#xf099;" aria-hidden="true"></i></a>

<i class="x-icon" data-x-icon-b="&#xf09a;" aria-hidden="true"></i>

<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://mohocon.com&title=Bæredygtige boliger&summary=Rum til livet&source=Mohocon" class="icon" class="linkedin" title="Linkedin" target="_blank"><i class="icon" class="x-icon-linkedin" data-x-icon="&#xf0e1;" aria-hidden="true"></i></a>

<a href="http://www.facebook.com/sharer.php?u=http://mohocon.com" class="icon last" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook" data-x-icon="&#xf09a;" aria-hidden="true"></i></a>

<div class="label">&nbsp;<i class="x-icon-share-alt" data-x-icon="&#xf1e0;" aria-hidden="true"></i></div></div>

Thanks.

#4

… continued. Somehow the new code inserted (based on your advise) was omitted. Here you are:

<div class="mhcsocialshare">

<a href="http://twitter.com/share?text=Bæredygtige boliger&url=http://mohocon.com&hashtags=huse,byggeri,bæredygtighed,arkitektur,design" class="icon first" class="twitter" title="Twitter" target="_blank"><i class="x-icon" data-x-icon-b="&#xf099;" aria-hidden="true"></i></a>

<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://mohocon.com&title=Bæredygtige boliger&summary=Rum til livet&source=Mohocon" class="icon" class="linkedin" title="Linkedin" target="_blank"><i class="x-icon" data-x-icon-b="&#xf0e1;" aria-hidden="true"></i></a>

<a href="http://www.facebook.com/sharer.php?u=http://mohocon.com" class="icon last" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook" data-x-icon="&#xf09a;" aria-hidden="true"></i></a>

<div class="label">&nbsp;<i class="x-icon" data-x-icon-b="&#xf09a;" aria-hidden="true"></i></div></div>

Thanks.

#5

Hi @nblund,

Looks like you only updated the icon code for facebook. I tried changing the icon codes coming from https://fontawesome.com/icons/ for twitter and linked in and it works. Please note that what I provided is just a guide, you should do similar changes in other parts of your code that displays icon.

And another issue why it’s not displaying even though icons are already loading is your CSS itself. In your first CSS, there is a 3px width

.icon {
***
**
*

width: 3px;

***
**
*
}

And that’s what hides it, now, I guess what you’re trying to do is display the icons upon hover? If yes, then you should add width for the hover effect to negate the 3px. Example,

.mhcsocialshare:hover .icon, .mhcsocialshare icon:hover {
width: 32px;
}

And this shouldn’t be working even before it’s updated, because if you set a width, the only way to change it back is to set another width (hover) and there is currently none.

Thanks!

#6

Great help. Thanks. Most of it worked smoothly. Only one thing remaining: On larger screens the share icon in the footer does not display. Instead you will see the Facebook logo. On smaller screens it is all in place. Please advise.

#7

Hello @nblund,

Thanks for updating the thread.

I tested the website on different screen resolutions and footer icons seems to working and displaying fine. I suggest you to please try clearing the cache and make sure you are using latest version of the browser. Please try it out and let us know how it goes.

Thanks.

#8

Hi there. I cleared the cache in Safari. Cleared web site cache. Error still remains. Please have a look at the attached. Thanks.

#9

Hi There @nblund

Upon checking your referenced site, I now see a different footer than your earlier screenshots.

It seems that you have manged to fix the issue. Let us know if you need further assistance.

Thanks!

#10

Hi guys. The issues remains. Please have a look at the footer here: Mohocon.com. Thanks.

#11

Hey @nblund,

You have a bar (Footer Bar 1) shown only on desktop and you have a bar (Footer Bar 2) shown only starting from the tablet view and below. Now, the problem is you have not updated the icon in your desktop bar. Please check the differences between your desktop bar and mobile bar.

Regretfully, since this involves custom code, fixing this issue would be veering into custom development which is outside the scope of our support. Please consult with a third party developer if the issue persists.

Thank you for understanding.

#12

I can’t believe I didn’t see this last issue myself - sorry guys. Thanks for your help.

#13

We are delighted to assist you with this.

Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.