jui(dwz)의 메뉴 트리를 아름다운 아이콘 세트로 변경

JUI는 무료 오픈소스 프레임워크로, 사용 초기에는 문서가 너무 적고 어디서부터 시작해야 할지 모르기 때문에 어려움을 겪게 됩니다. 귀하의 선택이 좋다는 것을 알게 되면 개발 효율성이 향상되고 동시에 사랑에 빠지게 될 것입니다.

현재 회사에서는 비용을 적게 지출한다는 원칙에 따라(사실 제한된 프런트엔드 수준 때문에) 여러 가지 소규모 프로젝트를 진행하고 있지만 학습 및 개발 과정에서 몇 가지 문제에 직면했습니다. , 하지만 모두 만족스럽게 해결되었으므로 함께 공유하고 배우고 발전하기를 바랍니다.

제 수준에는 한계가 있으니, 잘 못 쓰는 부분이 있으면 추가해주세요.

오늘이나 앞으로 며칠 동안 먼저 인터페이스를 아름답게 만드는 데 집중하겠습니다. 오늘은 아이콘 미화부터 시작하겠습니다.

먼저 공식 오리지널 메뉴 아이콘을 살펴보겠습니다. 통일감있고 심플해요.

다채롭고 개인화되었으며 공개적으로 변경된 아이콘을 살펴보겠습니다. 더 예뻐진 느낌? 눈이 반짝반짝 빛나는 것 같나요?

다음으로 자세히 설명하겠습니다.

처음에는 시스템이 기본 아이콘을 제공하기 때문에 더 이상 추가하거나 수정할 수 없다고 생각했습니다. 이는 작성자가 혁신이 부족한 인터페이스를 보고 싶어하지 않는다는 것입니다. 그래서 한번 해보자는 마음으로 시작하게 됐어요.

부트스트랩을 사용하면서 글꼴 아이콘에 관심이 많아 글꼴 파일을 다운로드하고 프레임 왼쪽의 메뉴 목록을 다음과 같이 변경했습니다.

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

네, 핵심 코드는 이 입니다. Fontawesome을 사용하면 이미지를 처리할 필요가 없다는 장점이 있습니다. 글꼴을 사용합니다. 텍스트 앞에

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