给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>;}

每个主题添加相应的颜色，颜色的话，根据主题的颜色自行设定。

至此，漂亮的树菜单图标就添加好了，同时也美化好了。