CODEWITHSUNDEEP
asp.net-mvcazurefontsazure-web-app-servicefontello
Danielle
Danielle

Reputation: 3839

Fontello icons not showing in Azure web application

Using MVC 5, I included Fontello icons in my app. I have the following file types in my font folder: eot, ttf, woff, woff2, svg

Running application locally, the icons look fine but when run in Azure they do not show.

As recommended in: http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/ , I added the following code to web.config:

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

This did not help, icons still do NOT show, I get the following console error:

The link http://{myapplication}.azurewebsites.net/fonts/font/fontello.woff?50484361 Failed to load resource: the server responded with a status of 404 (Not Found)

but I get this only for 3 of the 5 file types: (ttf, woff & woff2).

Note: the files do exist, and in the correct location !

Any ideas ?

Upvotes: 1

Views: 1249

Answers (1)

Danielle
Danielle

Reputation: 3839

So here is how issue was solved --- Thank you @GauravMantri for the solution !!

The files:

\fonts\font\fontello.ttf
\fonts\font\fontello.woff
\fonts\font\fontello.woff2

did exist physically on disk, in my local environment, and so running locally was fine. But they were not really part of the solution and thus were not deployed to Azure.

See this image

All that was needed to do:

Right click files in VS => 'Include In Project' and then publish again to Azure..

Upvotes: 3

Related Questions