CODEWITHSUNDEEP
twitter-bootstrapazurefontsfont-awesome
mattruma
mattruma

Reputation: 16677

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

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.

Upvotes: 31

Views: 11917

Answers (3)

Marilize
Marilize

Reputation: 11

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/...

Upvotes: 1

Patrick McDonald
Patrick McDonald

Reputation: 65421

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.

Upvotes: 7

Jamie Altizer
Jamie Altizer

Reputation: 1542

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>

Upvotes: 75

Related Questions