[CSS] Font Awesome 404 issue

 CSS   Font Awesome   404 error

---

▌Background

---

開發專案中使用到Font Awesome CSS模組。 這個CSS是以自訂字型來做為CSS  content顯示的圖片。

例如下圖的上面四個按鈕，其實是Font Awesome的字型：

在未正確設定Web application時，會出現無法顯示字型和以下的404錯誤：

如果要正確顯示，必須進行以下設定。

▌Trouble shooting

▋CSS and Font

將Font Awesome的字型加入到專案，本例是置於 /font/

修改font-awesome.min.css 的字型路徑： (預設是 ‘../fonts/….’)

▋Web config

在WebConfig加入以下設定讓IIS支援MIME type : font-woff*。

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

▌Reference

---

l   FontAwesome Fonts and Mime Types in IIS and other Web Servers