Problems with Font-Awesome

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

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.

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.

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:

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

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

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

Hello, we still having the issue ....
Can somebody help us with that ?

Thanks

@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