Search code examples
asp.net-mvcazurefontsazure-web-app-servicefontello

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 ?


Solution

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