給jui(dwz)的選單樹換一套漂亮的圖標

JUI是一個免費開源的框架，在使用初期，會遇到一些麻煩，因為文檔實在太少了，完全不知道從哪裡入門，但是，一旦你深入學習後，你會發現，你的選擇是不錯的，它會提高你開發的效率，同時，你會深深愛上它。

目前公司有幾個小專案在做，本著少花錢的原則（其實是自己前端水平有限），選擇了此框架，在學習開發過程中，遇到了一些問題，但都圓滿解決，所以很希望分享出來，共同學習進步。

我程度有限，有寫得不好的地方請多多包含。

今天或接下來幾天，我都會先圍繞著介面的美化進行展開。今天先講圖標的美化。

先來看看官方原來的選單圖示。它是統一的，簡單的。

再來看看修改後的圖標，這是多彩的，個性的，張揚的。是不是覺得漂亮多了？是不是有眼前一亮的感覺？

接下來，我們就開始細說：

剛開始以為，既然系統提供了預設的圖標，我們就不能再添加或修改，這完全不符合個性的需求，相信作者也不希望看到缺少創新的介面。因此抱著試試看的態度，進行了開動。

用過bootstrap，對於字體圖示很感興趣，因此下載了fontawesome字體文件，將框架左側選單列表改為：

<li><a href="@Url.Content("~/CarManage/Index")" target="navTab" rel="carindex"><i class="fa fa-bus fa-lg fa-fw"></i>  车辆管理</a></li>

對，關鍵程式碼就是這個  ,使用fontawesome的好處就是，不有去處理圖片，它是以字體的形式進行展示，同時呼叫方便，在文字前加入一個

就行，記得加一個空格。

附上fontawesome的地址，可以到上面找到你想要的圖示：http://fontawesome.dashgame.com/

這樣一來，選單的前面就加了一個圖示了。是不是比以前漂亮多了？但不是還是有點看不上眼？確實，因為為什麼都是黑的？

 

好吧，再繼續怎麼變顏色。其實聰明的你應該已經知道了。 JUI自帶幾個模板，每套模板對應一個CSS文件，只要我們增加一個樣式就可以了。

開啟JUI的主題目錄

每個目錄下面有一個style.css文件，打開它，在最下面添加自訂的圖示顏色

<span style="color: #008000;">/*</span><span style="color: #008000;">自定义</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">菜单图标的颜色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.tree i</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#88c7cb</span>;}

每個主題加上對應的顏色，顏色的話，依照主題的顏色自行設定。

至此，漂亮的樹選單圖示就添加好了，同時也美化好了。