[EasyUI美化换肤]更换EasyUi图标
本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式..我换个皮肤..就更不谈..)
其实重点看需求,我们主要做的后台项目对手机Web几乎没要求,所以,暂不考虑
上几张效果图先:
整体布局
树形菜单:
菜单列表:
改了之后还是可以的(毕竟我也不是专业的美工,我就是个.NET的开发..没办法..被逼的..)..
其实我们引用EasyUI的时候就可以发现,除了要引用easyui.css还要加一个icon.css,这里面就是EasyUI的图标了,我们看看里面如图:
里面都是一些.icon开头的样式,对应的都是一些background地址,这里我们就有两种换的方案
第一种简单无脑版:重做这些图片大小一致 图片换掉..
第二种高端大气无后患版:找到新的图标替代
我反正..选择了第二种..,我们选择Font-awesome3.2,这个图标集来替换,
为什么选择这个呢
1.他的3.2版本CSS开头也是.icon(4.0+版本换成了fa)方便我们替换
2.图标够多..完全够用
我们直接打开Font-awesome提供的CSS样式.
将EasyUI的样式复制到Font-awesome的最下面.
然后把其中的背景图样式全部删除.
这里替换一个作为范例:
EasyUI中有一个叫.icon-add,我们发现图标是一个加号
我们在Font-awesome官网找到这个加号对应的样式名称: icon-plus
然后在Font-awesome的CSS中搜索到他对应的context是:\f055
我们就在改.icon-add为如下代码:
.icon-add:before{
content: "\f055";
}
这样我们就完成了一个图标的替换
后面的只要一一按照这个方法,就替换完成了~
最新文章
- Fzu2109 Mountain Number 数位dp
- HP P1008打印机如何打印特殊纸张
- ZOJ 3157 Weapon --计算几何+树状数组
- JS实现复选框全选全不选以及子复选框带动全选框的选中
- SPA examples
- Spring REST实践之Error Handling
- nodejs自己在项目中使用的一个工具库utils.js文件
- UIWebView1-b
- Matlab中常用操作
- Qt经典—线程、事件与Qobject(耳目一新)
- win7_32位安装MySQL_5.6以及密码修改方法
- GPS校时器,GPS时钟装置,NTP网络时间服务器
- HI3531ARM调试printf的实现
- Python(2)深入Python函数定义
- drf框架使用之 路飞学城(第一天)
- spring boot和swagger 整合
- 读《31天学会CRM项目开发》记录3 - CRM解决方案
- 程序员、互联网从业者必读KK三大力作之《必然》总结
- Codeforces812C Sagheer and Nubian Market 2017-06-02 20:39 153人阅读 评论(0) 收藏
- Hadoop基础原理
热门文章
- 按需加载.js .css文件
- OpenSceneGraph in ActiveX by ActiveQt
- dubbox微服务实例及引发的“血案”
- C++随笔:.NET CoreCLR之corleCLR核心探索之coreconsole(2)
- 从Vue.js窥探前端行业
- python中IndentationError: expected an indented block错误的解决方法
- ES6(块级作用域)
- ios label 自动计算行高详解
- 算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!
- 腾讯云下安装 nodejs + 实现 Nginx 反向代理