2

I'm working on a phonegap application with builds for ios and android. Somehow the android build is acting strange. Randomly some font-awesome icons are not displayed properly. This only happens on the android build.

Font-awesome is being served from the local filesystem. I've done some research already.

  • font-awesome.min.css is linking to the correct font files.
  • I don't have any conflicting font-families in my css.
  • I'm using the correct font-awesome classes.
  • Font-awesome is in fact loaded correctly.

I'm hoping someone else had this issue before.

Here's my code that loads font-awesome.

<head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/font-awesome.min.css">

As you can see the font-awesome icons (top left and top right) are showing rectangles, however other font-awesome icons show properly.

Teun Betting
  • 51
  • 5
  • I used to have a similar issue a while ago, although not with phonegap. It had to do with caching. Have you checked that out? Can you also post some code to show us what you have right now? – adamk22 Oct 13 '16 at 13:22
  • Maybe sometimes your code just dont achieve to charge the font, do you always set multiple font as recommended? (so if one does not work, another will take place and if a character is not found it will not shown in many case (instead of displaying rectangles)) – N.K Oct 13 '16 at 13:35
  • Can you add your code where you load the font please ? – e666 Oct 13 '16 at 13:51
  • 1
    After futher testing it seems it only occurs on fresh builds. When I quit the app and relaunch it the icons show just fine.. I've added the code in the post. – Teun Betting Oct 13 '16 at 15:13

1 Answers1

2

Did some more testing and it seemed that for some reason font-awesome wasn't fully loaded or something. After changing some css in the inspector the css refreshed and then the icons would show correctly. I can't really pinpoint the exact cause, but it looks like it has to do something with cache. Instead of loading all the css in the head I placed the css on the bottom of the page. This fixed the problem! Tested multiple times now and the icons keep showing up correctly! Thanks for the help anyway.

Teun Betting
  • 51
  • 5
  • 2
    Must be some sort of race-condition between the document-ready event triggering font-awesome to redraw and the loading of the font-awesome font file, which loads a-synchronous. Glad you found a work-around! – Hacky Oct 18 '16 at 14:08