Font Awesome图标无法在Phonegap iOS应用程序中呈现

Question

Rather then render the icons I am getting small squares:

It works perfectly fine within the browser, but when I viewed my app in iOS Simulator or Mobile Safari, the squares were there.

Thanks so much for your help!

Answer 1

i had the same issue. I put the "font-awesome.min.css" file directly in my cordova ios xcode and than i called it in the "index.html" file, with:

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

after that i try to use the font awesome spinner instead the default jQuery Modile preloader, with this code even in "index.html" before jQuery Mobile call:

<script>
        $(document).bind( 'mobileinit', function(){
                         $.mobile.loader.prototype.options.text = "loading";
                         $.mobile.loader.prototype.options.textVisible = true;
                         $.mobile.loader.prototype.options.theme = "p";
                         $.mobile.loader.prototype.options.textonly = false;
                         $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><i class='fa fa-spinner fa-spin fa-5x' style='color:#000;'></i></span>";
                         });
</script>

The result is the same a rotate square, Where i'm wrong?

Answer 2

First, install Font Awesome:

Download the latest Font Awesome version Double-click fontawesome-webfont.ttf and install it on your laptop/desktop (optional) Copy fontawesome.css to www/css Remove the references to font files in fontawesome.css, ie remove @font-face declaration Then in Xcode:

Copy fontawesome-webfont.ttf into “Your Project/Resources/fonts/fontawesome-webfont.ttf” Add Font Awesome to the .plist file by selecting the “Info” tab Add a new property named “Fonts provided by application” and set the value to “fontawesome-webfont.ttf” Clean and build your project. Font Awesome is now ready to be used.

Phonegap example: class="fa fa-cog"