Social icons - very bold + blurry

[Cherylwoodman]

Hi Themeco team,

I recently had some trouble with my social icons disappearing with the update of your theme.

Here’s the tread > https://theme.co/apex/forum/t/theme-update-causes-social-icons-to-go/42364/3

While the fix worked, they don’t display well in moxilla > https://www.screencast.com/t/ZaEXM6zT

Can you help? How can i fix this?

Thanks,

Cheryl

[mldarshana]

Hi Cheryl,

Thanks for writing in! It’s part of the font-awesome v5. There is solid, regular, and bold hence, data-x-icon-s, and data-x-icon-b.

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

[data-x-icon], [class*="x-icon-"] {
    font-weight: 400;
}

Thanks!

[Cherylwoodman]

Thankyou this helps!

Do you know where I’d find the codes to switch the square icons to the circular ones?

[jade]

Hi Cheryl,

Did you add the social icons to the main menu?

If you want to use other icons, try checking in WP Admin > Appearance > Menus and change the label of the icons.

In case did you not add the icons to the menu, please provide us with the URL of your site because the URL that is attached the license in your account goes to a 403 site.

Thank you.

[Cherylwoodman]

Hi Jade,

Yes sorry my fault for not explaining properly - i meant were would i find the code for the circular icons/light icons? As in to switch the code found in WP Admin > Appearance > Menus

Thanks,

Cheryl

[rad]

Hi @Cherylwoodman,

There are no circular icons, the circle is just part of the styling (background of the icon). Hence, you can achieve the same look by applying the CSS. Example, please add this CSS to your global custom CSS as well

.x-navbar [data-x-icon], .x-navbar [class*="x-icon-"] {
    font-weight: 400;
    padding: 5px;
    background: #000;
    color: #fff;
    border-radius: 10px;
    position: relative;
    top: -5px;
}

Thanks!