4

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"/>
  • Are there any messages in the console? – greenstork Oct 27 '14 at 16:45
  • There are no error messages or warnings, it just removes the include tag. so weird – ChrisBland Oct 27 '14 at 16:46
  • Could you post your VF markup for the css reference. – greenstork Oct 27 '14 at 16:49
  • <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')}"/> or <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"/> – ChrisBland Oct 27 '14 at 17:00
  • 2
    hey @greenstork - that shouldn't matter, the static resource loads perfectly fine in the regular VF page, this issue relates to loading a static resource in Salesforce1 that uses icon-fonts, what I'm guessing is salesforce does not allow vector graphics in Salesforce1 containers. – ChrisBland Oct 27 '14 at 18:06
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.