CODEWITHSUNDEEP
.net-corebootstrap-4font-awesome.net-core-3.1
Jason
Jason

Reputation: 113

Fontawesome Icons showing on desktop but not on mobile

My fontawesome icons are showing up in my select list on the desktop version of my app in Chrome, but on my mobile version (Galaxy S7) I get boxes, weird symbols and the occasional Japanese characters. I've read about 30 articles that say to set the font-weight to 900, but of course that doesn't help.

It seems the fonts are missing? But why does it work on the desktop version but not on mobile? I'm using fontawesome 5.5.0 and the cloudfare CDN. And I'm running .net core 3.1.

Any help would be greatly appreciated. Thanks!

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css' rel="stylesheet" />

<select class="text-info border-0 fa fa-select fa-2x " id="Icon" name="Icon"><option class="fa-select" value="@Model.Icons[i].Id">@Html.Raw(Model.Icons[i].UnicodeWithHTML)</option></select>

Here's my css.

.fa-select { font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Font Awesome 5 Free Solid'; font-weight: 400; }

Upvotes: 2

Views: 1557

Answers (1)

Jason
Jason

Reputation: 113

So what I discovered is that android and IOS popovers apparently don't support the @font-family css, therefore can't display fontawesome icons correctly in the popover. Ultimately I ended up using a bootstrap button to toggle a panel with the items for selection, thereby keeping it all within the HTML portion of the browser.

Upvotes: 2

Related Questions