CODEWITHSUNDEEP
androidhtmlcsscordovafont-awesome
Teun Betting
Teun Betting

Reputation: 51

Fontawesome randomly shows rectangles in my android application

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.

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.

Upvotes: 2

Views: 618

Answers (1)

Teun Betting
Teun Betting

Reputation: 51

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.

Upvotes: 2

Related Questions