Change the menu tree of jui (dwz) with a set of beautiful icons, juidwz

Change the menu tree of jui (dwz) with a set of beautiful icons, juidwz

JUI is a free and open-source framework. In the early stages of use, it will encounter some troubles, because there are too few documents and you do not know where to get started. However, once you study in depth, you will find that your choice is good, it will improve your development efficiency, at the same time, you will fall in love with it.

At present, the company is working on several small projects. In line with the principle of less money (in fact, the front-end level is limited), we chose this framework and encountered some problems during the learning and development process, but they have all been successfully solved, so we hope to share them and learn and make progress together.

I have a limited level. Please include a lot of poorly written information.

Today or in the next few days, I will first expand around the beautification of the interface. Let's talk about the beautification of icons today.

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

Let's take a look at the modified icon, Which is colorful, personalized, and public. Do you think it is much more beautiful? Is there a bright eye?

Next, let's talk about it in detail:

At the beginning, we thought that since the system provided the default icon, we could not add or modify it. This completely did not meet the individual needs, and I believe the author did not want to see a lack of innovative interfaces. So I started with a try attitude.

I used bootstrap and was very interested in font icons. So I downloaded the fontawesome font file and changed the menu list on the left of the framework:

<Li> <a href = "@ Url. Content ("~ /CarManage/Index ") "target =" navTab "rel =" carindex "> <I class =" fa-bus fa-lg fa-fw "> </I> vehicle management </a> </li>

Right, the key code is this <I class = "fa-bus fa-lg fa-fw"> </I>. The advantage of using fontawesome is that there is no way to process images, it is displayed in a font and easy to call. Just add <li> to the text and add a space.

With the fontawesome address attached, you can find the icon you want on it: http://fontawesome.dashgame.com/

In this way, an icon is added in front of the menu. Is it much more beautiful than before? But isn't it? Indeed, why are they all black?

 

Okay, how can we change the color. Actually, you should have known it. JUI has several templates. Each template corresponds to a CSS file. You only need to add a style.

Open the JUI topic directory

Each directory has a style.css file. Open it and add a custom icon color at the bottom.

/* Custom * // * color of the menu icon */. tree I {color: # 88c7cb ;}

Add the corresponding color for each topic. Set the color based on the topic color.

Now, the beautiful tree menu icon has been added and beautified.