Salesforce1 ignoring Font-Awesome stylesheets?

Question

I've run in to an interesting issue. I'm including Font Awesome in my project and Salesforce1 seems to not like it. I have a visualforce page and then I've marked that page salesforce1 ready. When I load the page in visualforce, the Font-Awesome style sheet loads along with the fonts, I can load the dev tools, see that it has that style-sheet loading in memory and everything works perfect. When I load that same page in the Salesforce1 mobile container (both as one.app and on my mobile device) salesforce seems to ignore or drop the Font-Awesome style-sheet. When I inspect the page on one.app it removes the markup for the stylesheet and does not include it. I've tried referencing the stylesheet from both a cdn, and from a static resource, and it doesn't make a difference.

So in summary, have you seen a time when salesforce will ignore a stylesheet include statement when loading in Salesforce1? I'm stumped by this.

I've tried all both of the following:

<apex:page showHeader="true" sidebar="false" controller="API" standardStylesheets="false" >
    <apex:stylesheet value="{!URLFOR($Resource.fontawesome, '/font-awesome-4.2.0/css/font-awesome.css')}"/>

And

<apex:page showHeader="true" sidebar="false" controller="API" standardStylesheets="false" >
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Answer 1

I've also seen some issue in using Font-Awesome while rendering graphics and fonts in visualforce. Not so sure if this is exactly what I was hit with but mine problem got resolved if I specifically add this CSS Styles just after I've included the FontAwesome Stylesheets:

<style type="text/css">
   @font-face {
      font-family: 'FontAwesome';
      src: url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.eot?v=3.2.1')}");
      src: url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.eot?#iefix&v=3.2.1')}") format('embedded-opentype'), url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.woff?v=3.2.1')}") format('woff'), url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.ttf?v=3.2.1')}") format('truetype'), url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')}") format('svg');
      font-weight: normal;
      font-style: normal;
    }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        @font-face {
            font-family: 'FontAwesome';
            src: url("{!URLFOR($Resource.FontAwesome, 'font-awesome-3.2.1/font/fontawesome-webfont.svg?v=3.2.1#fontawesomeregular')}") format('svg');
        }
    }
</style>

I was using Font-Awesome 3, but may be this resolves your issue.