Font Awesome 4.1.0 not working in Cordova android emulator

StackOverflow https://stackoverflow.com//questions/25022589

Question

I can't figure out why Font Awesome icons aren't showing up in my cordova app.

I downloaded the entire font-awesome folder and copied it to my project's folder. I've included the folder with:

<link rel="stylesheet" href="../font-awesome-4.1.0/css/font-awesome.min.css">

I am certain this is correct because <i class="fa fa-bars fa-2x"></i> will display in chrome perfectly fine.

However when I run cordova emulate android the icons don't show up in my android emulator.

I then tried following the troubleshooting here: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

It seems that the troubleshooting thinks this is an error related to text-rendering, but when I add text-rendering: auto; to .fa { } in both the minified and the full css, I still don't see the icons in my android emulator.

I'm at a loss of what to do. My android target project is 4.4.2 api level 19. Can anyone help?

Here's the html section related to the icons.

<body> 
    <div id="main">
           <div id="top">
               <i id="settings" class="fa fa-bars fa-2x"></i>
               <p id="logo" > Chowza Inc </p>
          </div>
    </div>
...
</body>
Was it helpful?

Solution 2

Answering my own question...

I copied the FontAwesome folder into my project folder but when using cordova emulate android the Font Awesome folder was not being built. Copying the FontAwesome folder into the CSS folder and changing the related link paths corrected this issue.

OTHER TIPS

I had same issue on android 4.0.3 cordova app. In my case I had to remove version parameter (v=4.1.0) from the url. For example:

Old block in font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

New block in font-awesome.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top