CODEWITHSUNDEEP
htmlcssfont-awesome
ajnbas
ajnbas

Reputation: 21

Font-Awesome Icon Showing Up As Square Box With a Cross on Android Browser Only

I am using the font awesome icon for my website. I am having an issue where the icon is displayed as a square box with a cross inside. This issue ONLY HAPPENS in Android phones when using Microsoft Edge.

Icon With Issue

Expected Display

Html Tag: <i class=”icon-reorder”></i> CSS:

i[class*="icon-"], b[class*="icon-"], button[class*="icon-"] {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
   -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.icon-reorder:before {
    content: "\f0c9";
}

I am using font-awesome version 5.15.4

Does anyone have any idea why the display issue happens only with Microsoft Edge mobile browser on Android phones? It is working as expected in IOS browsers.

Upvotes: 1

Views: 598

Answers (1)

ajnbas
ajnbas

Reputation: 21

Turns out I was getting a CORS error when I was trying to access font-related files like .woff, .woff2,.ttf, etc. The weird thing is this CORS issue happens only on android.

Upvotes: 1

Related Questions