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 c4555412df319074f761bcbd18957e0772ac96585ae54b6ae11f849d2649d9e6 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 25edfb22a4f469ecb59f1190150159c6 before the text. Remember to add a space.

Attach the address of fontawesome, where you can find the icon you want: http://fontawesome.dashgame.com/

In this way, an icon will be added in front of the menu. Is she more beautiful than before? But isn’t it still a bit disdainful? Indeed, because why are they all black?

Okay, let’s continue how to change the color. In fact, if you are smart, you should already know this. JUI comes with several sets of templates, each set of templates corresponds to a CSS file, as long as we add a style.

Open JUI’s theme directory

There is a style.css file under each directory, open it and add a custom icon color at the bottom

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

Add corresponding colors to each theme. If you want to color, set it yourself according to the color of the theme.

At this point, the beautiful tree menu icon has been added and beautified.