+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Problems with Font-Awesome

Problems with Font-Awesome

9 posts, 0 answered
  1. Nathalia
    Nathalia avatar
    25 posts
    Registered:
    16 Nov 2011
    12 Sep 2013
    Link to this post
    Hi all,

    We are trying to integrate Font-Awesome in our Sitefinity project.

    We install the entire Theme & Custom Widgets using the API, and using the following structure for the Template.
    |TemplateName
    |->App_Master
    |->App_Themes
    |-->Global
    |--->font-awesome.css
    |--->bootstrap.css
    |--->custom.css
    |-->fonts
    |--->fontawesome-webfont.eot
    |--->fontawesome-webfont.svg
    |--->fontawesome-webfont.ttf
    |--->fontawesome-webfont.woff

    It seems that the font-awesome.css can’t find the fonts but in the browser console we don’t have a 404 report or something similar, the icons won’t render in any browser.
    We have been working with font-awesome in multiple projects without Sitefinity and it works fine.


    When I render the project I can see the direction of the files font-awesome.css

    Is there a document type restriction or something similar?

    Thanks,
    Nathalia
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Sep 2013 in reply to Nathalia
    Link to this post
    Hey Nathalia,

    FontAwesome works in general with Sitefinity so no issues there.

    Just to ask and begin with the obvious, FontAwesome looks for 'font' folder and you named the folder 'fonts'. But I'm sure you've updated the source urls.

    You can check mime-mappings for sitefinity under Admistration >> Settings >> Advanced >> Libraries >> MimeMappings or set the mime-types in the web.config.

    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

    Just keep in mind that the RadEditor converts <i> tags to <em> tags by default, so if you ever copy/paste an icon into a content block and then edit it again, Sitefinity will by default change the tag-type and you'll lose the icon...
  3. Nathalia
    Nathalia avatar
    25 posts
    Registered:
    16 Nov 2011
    13 Sep 2013 in reply to Jochem Bökkers
    Link to this post
    Hi Jochem,
     Thanks for you reply. I added MimeMappings in Sitefinity configurations (Admistration >> Settings >> Advanced >> Libraries >> MimeMappings) and in the config  file but the icon is not displayed yet. I don't use controls of sitefinity, I created my widget with this HTML:
     <a id="lnkShoppingCart" runat="server">
                    <i class="icon-shopping-cart icon-3x pull-left"></i>
                    <p>
                        <asp:Literal ID="lblTotalItems" runat="server"></asp:Literal>
                        <asp:Literal ID="lblItems" runat="server" Text="Items" ></asp:Literal><br/>
                         <strong><asp:Literal ID="lblTotalAmount" runat="server"></asp:Literal></strong>
                    </p>
    </a>

    Thanks,
    Nathalia.

  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Sep 2013 in reply to Nathalia
    Link to this post
    Hey Nathalia,

    That should work, the i class="icon-shopping-cart icon-3x pull-left" seems legit although there's a slight possibility that the bootstrap 'pull-left' class at the end perhaps ruins it but I don't think the float:none; is the issue.

    The only thing I can think of that's blocking it is still the url in the css declaration:
    @font-face {
      font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.2.1');

    is the original and should be in your case '../fonts/fontawesome-webfont.eot?v=3.2.1' although that should have registered as a 404.

    If you want I'd be more than happy to take a closer look.Feel free to send a link to jochem.bokkers [at] outlook.com

    Jochem
  5. Nathalia
    Nathalia avatar
    25 posts
    Registered:
    16 Nov 2011
    13 Sep 2013 in reply to Jochem Bökkers
    Link to this post
    Hi Jochem,

    Let's recap.
    We develop a prototype using simple HTML and then we star the Sitefinity development.
    All the classes we add are working well on the HTML prototype.

    We are ussing:
    HTML 5
    Bootstrap 3
    Font-Awesome.

    We add the MimeMap but it doesn't work.
    I can see where the icon should be, but instead I get a wear character(you can check the image attached on the comment).
    We just find that Sitefinity import the CSS files in alphabetic order but that should't affect the fonts. We work before with Google-web-fonts and no problem but in this time it seems that Sitefinity or something in the project is reading the fonts as text not as a font file.

    Thanks,
    Nathalia
  6. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    13 Sep 2013 in reply to Nathalia
    Link to this post
    Hey Nathalia,

    Ah ok, I think we've hit the snag now... bootstrap 2.31 and bootstrap 3.0 aren't interchangeable.
    Aside from grids and some very very annoying content-box vs border-box issues, there's simply to much changed and font-awesome hasn't (at least until last week) been updated to support 3.0

    Aside from the bootstrap version I've used the same setup last week on a project without a problem on a sitefinity v6.1 site. If you're not dead-set on a Bootstrap v3.0 framework, I'd stick with v2.31 atm.

    I'll dump the font-awesome into a Bootstrap 3 project tomorrow morning and see if we can hack around it though.

    Jochem
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    14 Sep 2013 in reply to Jochem Bökkers
    Link to this post
    Hey Nathalia,

    I've dropped Font-Awesome into a Bootstrap 3.0 project earlier.

    The .less version you should forget, it won't play nice out of the box with non existing mix-ins and the fact that twbs introduced a glyphicons.less.

    The out-of-the-box .css version works, if it's dropped in as the last .css file. For testing it's easier to just drop a css-widget onto the page and copy-paste the content of font-awesome.css inline into the widget. It's the fastest way of checking since it'll load after all the regular stylesheets.

    One thing I noticed while dropping it in, is the fact that Firefox doesn't display loading the file in the firebug network panel. Chrome does, so perhaps its easier to test with that.

    Sorry I've not been able to give a conclusive answer...
    Jochem
  8. Jeffry
    Jeffry avatar
    1 posts
    Registered:
    08 Jun 2009
    24 Sep 2013
    Link to this post
    Hello, we still having the issue ....
    Can somebody help us with that ?

    Thanks
  9. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    24 Sep 2013 in reply to Jeffry
    Link to this post
    @Jeffry,

    I think we ruled out Sitefinity as being problematic out-of-the-box, so it seems to be a setup related issue.

    Like I offered to Nathalia before, shoot me an email (jochem.bokkers [at] outlook.com) or call me on skype (jbokkers) and I'd love to help out and take a closer look.

    Jochem
9 posts, 0 answered