2014年12月21日 星期日

ASP.NET MVC + Bootstrap + Font Awesome - Semantic FontAwesome Helper for MVC Razor 介紹

之前曾經介紹過如何在 ASP.NET MVC 網站專案裡使用「FontAwesome.MVC」這個套件,讓我們不必徒手將 FontAwesome 安裝到專案裡(雖然徒手安裝也沒有多繁雜),畢竟能夠減少一些安裝步驟總是可以讓我們節省一些時間,

mrkt 的程式學習筆記: ASP.NET MVC + Bootstrap + Font Awesome

而這次要介紹另一套也是有關於 Font Aewsome 的 Nuget Package「Semantic FontAwesome Helper for MVC Razor」,讓我們在 ASP.NET MVC 編輯 View 的時候,就可以直接以 Razor Syntax 去操作使用 Font Awesome。

 


Semantic FontAwesome Helper for MVC Razor

https://www.nuget.org/packages/ThatsFontAwesome/

image

說明網頁

http://thatsit.com.au/nuget/thatsfontawesome

image

其實看過說明網頁的內容之後就可以知道應該如何在 View 裡面怎麼使用了,不過這邊還是來個小小的操作說明。

 

建立好一個 ASP.NET MVC 網站之後,開啟 Nuget 套件管理介面,搜尋「FontAwesome」,就可以找到「Semantic FontAwesome Helper for MVC Razor」,

image

套件安裝完成之後,會在「fonts」目錄下增加字型,另外在「Content」目錄下也增加必要的樣式表檔案,然後在專案的參考裡多增加了一個「ThatsFontAwesome」,

image

在使用之前,要記得先在 _Layout.cshtml 的 header 裡加入樣式表的使用,又或者是直接加入到 BundleConfig.cs 的設定裡,

image

另外在安裝套件完成之後,就會幫我們在專案根目錄的 Web.Config 與 Views 目錄下的 Web.Config 裡增加 Namespace,這麼一來就可以不必在 View 裡去另外加入 Namespace 的使用,

image

image

接著就可以在 View 裡面去使用了,例如:

image

顯示結果

image

另外如果你覺得要在 View 裡面使用這套件去產生 FontAwesome 的圖示之前需要先輸入 ThatsFontAwesome.Fonts,覺得這麼處裡有些累贅的話,其實也可以在 View 裡面使用命名空間別名的方式,這樣就可以少輸入幾個字(不過話說回來,Visual Studio 的 Intellisense 相當強大,只要輸入幾個字母後就接著去選要用的方法或類別,應該已經很少人會老實地去完整輸入字串裡的所有英文字母),

image

 

其他還有一些比較進階的使用方式,這部分就請有興趣的朋友前往 Semantic FontAwesome Helper for MVC Razor 的說明網頁查看。


如果你是使用 VB.NET 開發 ASP.NET MVC 的朋友,Semantic FontAwesome Helper for MVC Razor  這套件就有提供了 VB.NET 語法的支援,這算是有別於其他只提供 C# 語法套件的一個最大不同點,看到這套件的第一眼會覺得做得不是那麼漂亮,但在使用上還算是直覺,如果你真的覺得這套件還不是那麼好的話,在下一篇會介紹另外一套比較多人使用的 Font Awesome 套件。

 

相關連結

https://www.nuget.org/packages/ThatsFontAwesome/

http://thatsit.com.au/nuget/thatsfontawesome

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言