首页 >web前端 >html教程 > 正文

给jui(dwz)的菜单树换一套漂亮的图标

原创2016-09-07 12:58:090842
JUI是一个免费开源的框架,在使用初期,会遇到一些麻烦,因为文档实在太少了,完全不知道从哪里入门,但是,一旦你深入学习后,你会发现,你的选择是不错的,它会提高你开发的效率,同时,你会深深爱上它。

目前公司有几个小项目在做,本着少花钱的原则(其实是自己前端水平有限),选择了此框架,在学习开发过程中,遇到了一些问题,但都圆满解决,所以很希望分享出来,共同学习进步。

我水平有限,有写得不好的地方请多多包含。

今天或接下来几天,我都会先围绕界面的美化进行展开。今天先讲图标的美化。

先来看看官方原来的菜单图标。它是统一的,简单的。

再来看看修改后的图标,这是多彩的,个性的,张扬的。是不是觉得漂亮多了?是不是有眼前一亮的感觉?

接下来,我们就开始细说:

刚开始以为,既然系统提供了默认的图标,我们就不能再添加或修改,这完全不符合个性的需求,相信作者也不希望看到缺少创新的界面。因此抱着试试看的态度,进行了开动。

用过bootstrap,对于字体图标很感兴趣,因此下载了fontawesome字体文件,将框架左侧菜单列表改为:

对,关键代码就是这个 ,使用fontawesome的好处就是,不有去处理图片,它是以字体的形式进行展示,同时调用方便,在文字前加入一个

  • 就行,记得加一个空格。

    附上fontawesome的地址,可以到上面找到你想要的图标:http://fontawesome.dashgame.com/

    这样一来,菜单的前面就加了一个图标了。是不是比以前漂亮多了?但是不是还是有点看不上眼?确实,因为为什么都是黑的?

    好吧,再继续怎么变颜色。其实聪明的你应该已经知道了。JUI自带有几套模板,每套模板对应一个CSS文件,只要我们添加一个样式就可以了。

    打开JUI的主题目录

    每个目录下面有一个style.css文件,打开它,在最下面添加自定义的图标颜色

    /*自定义*/
    
    /*菜单图标的颜色*/
    .tree i{color:#88c7cb;}

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

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

  • php中文网最新课程二维码

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php中文网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类