[sandy07]

Hello, why are my social icons and the mobile menu (hamburger symbol) displayed as empty squares? I also have a few random squares now throughout my webpage. How can I fix this? https://www.breiterag.ch

Thanks for the help.

[sujeet]

Hello @sandy07,

I am unable to view the website: https://www.breiterag.ch/ .  Any issue with the website url?
Can you please check and share me your correct url?

Regards,
Sujeet

[sandy07]

hello

the url is https://www.breiterag.ch  if you display the page in reduced size you can see the square in the upper left corner. if you display the page in normal size you can see the square for the insta – link in the upper right corner.

regards,

sandy

[sandy07]

Add: I can’t find any issue, the url works for me with firefox, opera and also with microsoft edge http://www.breiterag.ch

[sujeet]

Hello @sandy07,

Your theme has already been updated to latest version 3.0, so it should work.
Firstly, please try to clear cache and secondly, try disabling all the plugins and check it.

The latest version of theme is all fine in our side. Please let me know if the above suggestions worked for you. Thank you

Regards,
Sujeet

[sandy07]

Hello Sujeet

Unfortunately, it did not have the desired effect.

I asked my hoster, who wrote me the following:
The cause seems to be that your WP theme uses the font “Font Awesome 6 Free” in its code, which provides the graphic icons, and this font is not present in your WP or is not loaded.

The WP page is edited with Elementor. Font Awesome 4 support is enabled there.

What can I do? Thanks for your help.
Regards,
Sandra

[Sakin]

Hello Sandra,

If you want to use the Font Awesome 4 which is there in Elementor then you can add following CSS in “Appearance => Customize => Additional CSS” box

.mobile-menu-anchor .fa-menu:before {
  font-family: "FontAwesome";
}

But if you want to use the Font Awesome 6 which is there in the theme then you can add following CSS in “Appearance => Customize => Additional CSS” box

.mobile-menu-anchor .fa-menu::before {
  font-family: "Font Awesome 6 Free";
}

Regards,
Sakin

[sandy07]

Hello Sakin

thank you very much, the mobile menu is back!

Do you also have a code for the Instagram logo? If the integration of social media links also worked, that would be perfect.

Thanks again for your efforts.

Regards,
Sandra

[Sakin]

Hello Sandra,

I think you are looking for more icons. So, it’s better to use Font Awesome 6 in the above CSS as well.

Can you add the following CSS for Social icons in “Appearance => Customize => Additional CSS” box

.widget_catchresponsive_social_icons a.font-awesome {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

Regards,
Sakin

[sandy07]

Hello Sakin

Thanks for the tip. Unfortunately, when I use “FontAwesome 6” in the CSS, it doesn’t work. It also doesn’t display the social media icons. What am I doing wrong?

Thanks again for your patience with me.

Regards,
Sandra

[Sakin]

Hello Sandra,

Elementor is using an old version of Font Awesome. So for Font Awesome 4, you can add the following CSS:

.widget_catchresponsive_social_icons a.font-awesome {
  font-family: "FontAwesome";
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

Regards,
Sakin

[sandy07]

Hello Sakin

Thank you, perfect!

Best regards and have a nice day!

Sandra

[Author]

Posts