IIS i Font Awesome

12.02.2013

Font Awesome to zestaw wektorowych ikon w postaci fontów. Około 250 popularnych, darmowych, w pełni skalowalnych ikon kontrolowanych z poziomu CSS. W paczce instalacyjnej dostępnej pod tym adresem dostarczone są podstawowe pliki z definicjami klas CSS, SASS, LESS oraz ikony w postaci fontów w formatach .eot, .svg, .ttf,, .woff i .otf. Instalacja FA jest prosta i polega na przegraniu zawartości pliku zip do katalogu w aplikacji  i dodaniu linków w nagłówku strony do dwóch plików CSS (opis tutaj). Niestety po zainstalowaniu zestawu w aplikacji ASP.NET/ASP.NET MVC na serwerze IIS otrzymamy błąd 404 przy próbie wykorzystania “fontów-ikon”. W standardowej konfiguracji IIS nie rozpoznaje plików z rozszerzeniem .woff (MimeType: application/x-font-woftype). Aby to naprawić, należy dodać nowy MimeType w konfiguracji serwera IIS, lub (jeżeli nie mamy bezpośredniego dostępu do IIS’a) dopisać odpowiednie linie w web.config’u aplikacji:

<system.webServer>
    // ...
    <staticContent>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>
</system.webServer>

Niestety to nie wszystko. Po dodaniu brakującego MimeType IIS nadal będzie zgłaszał błąd 404. Problemem jest standardowe położenie plików fontów ../fonts, a właściwie brak pliku web.config w owym folderze. Bez tego pliku IIS zabroni dostępu do katalogu. Aby to naprawić tworzymy plik web.config w ktalogu ../fonts:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>
  <system.web>
    <httpHandlers>
      <add path="*" verb="*" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
    <handlers>
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

Teraz Font Awesome powinno zadziałać poprawnie

Bonus: Fontello.com - generator web fontów z kilku różnych dostępnych zestawów wektorowych "fontów-ikon"(w tym Font Awesome).

UPDATE: Dodano usuwanie .woff żeby uniknąć konfliku w przypadku, gdy obsługa plików .woff zostałą skonfigurowana wcześniej na poziomie IIS'a. Dzięki Gutek.