::before broken on iPhones

Using BrowserStack to view the footer on this page, it seems the ‘houzz’ icon is broken on Mac devices in both Chrome/Safari (iPad, iPhone, etc.). Works find on PC devices.

I’m not sure how to troubleshoot to fix this but could use some help!

Thank you.

Do you mean the middle (was dribble) icon as that is missing on windows Chrome also.

Are you sure that’s the right font family?
You have this : font-family: "FontAwesome 5 Brands" !important;

However this: font-family: "FontAwesome" !important; seems to work in devtools.

In this rule:

.et-social-dribbble a.icon::before {
  content: "\f27c" !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
 font-family: "FontAwesome" !important;`
}
1 Like

I’ll check your recommendation out. Thank you, PaulOB!

This is an interesting point, PualOB, because the fonts I downloaded to use within Photoshop are “Font Awesome 5 Brands”. Thank you for the alternative suggestion!