ASP.NET MVC + Bootstrap + Font Awesome

其實大家對於 ASP.NET MVC + Bootstrap + Font Awesome 的組合應用已經相當熟悉了，這一篇並不會講說 Font Awesome 是個什麼樣的應用（如果還真的不知道然後又想要瞭解的話，可以去 Google），這一篇會來說明幾種如何在專案裡去加入使用 Font Awesome 的方式。

 

---

Font Awesome

http://fortawesome.github.io/Font-Awesome/

https://github.com/FortAwesome/Font-Awesome

想知道 Font Awesome 可以怎麼使用與做出什麼樣的變化，務必要看看 Examples 這一頁，

http://fortawesome.github.io/Font-Awesome/examples/

想要知道有哪一些圖示可以使用，就到 Icons 去查看，目前有 479 個圖示可以使用，

 

在 ASP.NET MVC 專案裡，當然我們可以直接從 Font Awesome 官網下載字型與 CSS 檔案，然後到專案裡去使用，

不過也可以在 Visual Studio 裡使用 NuGet 來加入使用，

安裝後所加入的字型與 CSS 檔案，

在檢視頁面裡的使用

顯示結果

 

那麼還有另外一個在專案加入 Font Awesome 的方式，一樣是透過 NuGet，不過並不是使用上面所說的 FontAwesome 這個 Package，而是另外一個「FontAwesome.MVC」

這個 FontAwesome.MVC 與上面所使用的 FontAwesome 最大的不同就是「FontAwesome.MVC」有加入了 bundling 與 minification。

 

FontAwesome.MVC

https://www.nuget.org/packages/FontAwesome.MVC/1.0.0

https://github.com/JustLikeIcarus/Font-Awesome-NuGet

 

在安裝 FontAwesome.MVC 之後一樣會安裝字型與 CSS 檔案，不過會在 App_Start 目錄裡新增加「FontAwesomeBundleConfig.cs」檔案，

FontAwesomeBundleConfig.cs

在 FontAwesomeBundleConfig.cs 裡面也有說明，如果要使用的話，就到 _Layout.cshtml 的 head 區間裡增加 Bundle 的使用，如下：

其餘的使用方式則是一樣，

顯示結果

 

---

這一篇就先講到這裡，避免篇幅過長，其餘的部分就在下一篇裡繼續說明，下一篇會介紹 Font Awesome 的相關套件。

 

相關連結：

http://fortawesome.github.io/Font-Awesome/

https://github.com/FortAwesome/Font-Awesome

https://www.nuget.org/packages/FontAwesome.MVC/1.0.0

https://github.com/JustLikeIcarus/Font-Awesome-NuGet

 

以上