Social Icons look terrible after update

[Scubamobile]

Hi there,

I recently updated X to 6.2.5 and cornerstone to 3.2.5. My social icons in the topbar and the footer now look terrible. They are bolder - so much so that you can’t really even see the G+ sign and the icons on the footer area seem bolder and smaller.

I have spent hours on here reading the different threads. So, what I have figured out is that Font Awesome 5 only supplies the icons in Bold, I have tried many different css options given on the threads to modify them - all have failed.

[data-x-icon], [class*=“x-icon-”] {
font-weight: 100 !important;
}

.x-topbar .x-social-global a {
font-weight: 10px;
}

.x-navbar [data-x-icon], .x-navbar [class*=“x-icon-”] {
font-weight: 200;
}

.x-navbar .desktop .x-nav>li i {
font-weight: 200;
}

[data-x-icon-b]:before {
font-weight: 300 !important;
}

I have cleared web browser and c-panel caches (I dont have any caching plugins)

I saw a thread that talks about adding the bootstrap to the child theme to revert back to the old css - I got a bit lost about how to do it reading the thread to be honest.

Do you have any ideas how I can fix this?

Thanks in advance, Cheers Nicky

[Prasant]

Hello Nicky,

Thanks for asking.

Please try adding CSS shared in following thread under X > Theme Options > CSS:

Social icons - very bold + blurry

Let us know how it goes.

Thanks.

[Scubamobile]

Unfortunately no - it changes nothing. Was one of the first tried actually. I added !important to it as well to see if that would help and nothing.

[Scubamobile]

Ok, so I have got it working.

With the same code as above, funny to think I have just spent hours trying code variations and the one that works is the first one I tried!

But, what I did do differently this time was add it to the top of my Global Css. Normally when I add something I add it at the end.

So, just curious if you could explain to me why it is that it took no effect when I placed it at the end - and does work when I place it at the top?

Cheers again for your assistance, Nicky

[ruenel]

Hello Nicky,

If you have added the code to the bottom right after this css block:

@media only screen and (max-width:695px){
    .woocommerce div.product .summary .product_title{
        font-size:160%;
    }
    .woocommerce .price,.woocommerce-page .price,.woocommerce li.product .entry-header .price>ins>.amount{
        font-size:80%;
    }
    .x-acc-header span{
        margin-top:0;
    }
    .x-acc-header span p{
        margin:0 !important;
    }
    

then it will no longer work because that code block is missing a closing curly brace. For best results, please make sure that your custom css and @media block will be in this order:

element {
  /* css styling */
}

.class {
  /* css styling */
}

#id {
  /* css styling */
}

@media(max-width: 767px){
  element {
    /* css styling */
  }
}

Hope this helps.

[Scubamobile]

Cheers for that, didn’t realise it was missing the closing bracket.

Thanks again for all your help guys!

[jade]

You’re welcome!