How to get fontawesome to work on an Azure web pages deployment?

Question

We are using Twitter Bootstrap and FontAwesome for icon support.

When deploying to one of our IIS servers I need to add MIME support.

When deploying to Azure, it doesn't look like I have this ability, so now my icons aren't showing up because it doesn't seem to know how to use the font.

score 75 · Accepted Answer · edited Nov 09 '12 at 13:47

75

Just add the following to the web.config ...

<system.webServer>    
   <staticContent>
       <remove fileExtension=".svg" />
       <remove fileExtension=".eot" />
       <remove fileExtension=".woff" />
       <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
       <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>
</system.webServer>

edited Nov 09 '12 at 13:47

mattruma

16,589
32
107
171

answered Nov 09 '12 at 13:44

Jamie Altizer

1,540
1
11
16

Thanks! I've been fighting this for two days now! – mattruma Nov 09 '12 at 13:46
Hmm, I tried this but still it doesn't work. Although the MIME types on the server side do get updated with the Local definitions. – tofutim Aug 03 '13 at 20:50
where is web.config located? – fscore Oct 29 '14 at 15:57
@fscore It is located in the root folder of your site. The same place you would be storing an index.html file. – Martyn Chamberlin Apr 01 '15 at 21:28
4

The woff line should be `` – GalacticJello Apr 13 '15 at 13:39

Patrick McDonald · Answer 2 · 2013-12-05T10:11:17.113

7

UPDATE

This answer is now unnecessary due to recent changes in the FontAwesome nuget package.

In addition to the solution described in the accepted answer, I noticed that the fonts in my project were in ~/Content/fonts, but the site was looking for the fonts in /fonts on Azure.

As a workaround, I copied the font files to ~/fonts (making sure the Build Action was set to Content for all) and all is good in the cloud.

edited Dec 05 '13 at 10:11

answered Nov 08 '13 at 12:13

Patrick McDonald

64,141
14
108
120

6

The original answer above is required - about the web.config changes. But this answer also helped set me in the right direction. I didn't want to publish my fonts in a different location (~/fonts) so I just separated fontawesome into its own bundle with a lower level path /Content/fonts/bundle ... like this: bundles.Add(new StyleBundle("~/Content/fonts/bundle").Include("~/Content/fontawesome/font-awesome.css")); – Ender2050 Nov 23 '13 at 02:55
this solution works. For some reason font-awesome was looking for the font folder in the root even tho the url(../) inside font-awesome.css is looking for the relative font folder inside font-awesome directory – Lexy Feito Sep 29 '16 at 15:34

score 1 · Answer 3 · edited Oct 19 '15 at 00:49

1

After doing the above, and if it still doesn't work, check the file for the font-awesome.css in your theme folder's css folder.

There is a URL linking the font-awesome files. Make sure it points to the folder with the font files from your new domain pointing to your Azure site, i.e enter the full URL instead of ../font/...

edited Oct 19 '15 at 00:49

Nathan Tuggy

2,237
27
30
38

answered Oct 13 '15 at 10:48

Marilize

11
1

How to get fontawesome to work on an Azure web pages deployment?

3 Answers3

Linked