Change the menu tree of jui(dwz) to a beautiful set of icons

JUI is a free and open source framework. In the early days of use, you will encounter some troubles because there are too few documents and you don’t know where to start. However, once you study in depth, you will find that your choice is good. Yes, it will improve your development efficiency, and at the same time, you will fall in love with it deeply.

Currently, the company is working on several small projects. Based on the principle of spending less money (actually because of its limited front-end level), I chose this framework. During the learning and development process, I encountered some problems, but they were all solved satisfactorily, so it was very satisfying. I hope to share it and learn and progress together.

My level is limited, so please include if there are any areas where I write poorly.

Today or in the next few days, I will focus on beautifying the interface first. Today I’ll start with the beautification of icons.

Let’s take a look at the official original menu icon first. It is unified and simple.

Let’s take a look at the modified icon again. It’s colorful, personalized and flamboyant. Do you feel more beautiful? Do you feel like your eyes are shining?

Next, let’s start to elaborate:

At first I thought that since the system provides default icons, we can no longer add or modify them. This is completely inconsistent with personal needs. I believe the author does not want to see an interface that lacks innovation. So I started with the attitude of giving it a try.

I have used bootstrap and am very interested in font icons, so I downloaded the fontawesome font file and changed the menu list on the left side of the frame to:

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

Yes, the key code is this The advantage of using fontawesome is that there is no need to process images, it is in the form of fonts For display and easy calling, just add a

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