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

这样我们就完成了一个图标的替换

后面的只要一一按照这个方法,就替换完成了~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现...

43511
来自专栏Jackson0714

【博客美化】09.评论带头像,且支持旋转

2536
来自专栏逸鹏说道

前端常用插件

插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 Thea...

3536
来自专栏DeveWork

为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文...

1919
来自专栏IMWeb前端团队

记一次Layer管理遇到的Bug及其相关问题的探索

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 之前通过Udacity的浏览器渲染优化课程了解到其中有讲到一个...

18510
来自专栏十月梦想

字体大小单位vw和reg

vm是相对浏览器宽度,1vm浏览器1%,10vm10%,浏览器窗口大小,字体自适应,开发多用到vm作为字体单位

845
来自专栏Material Design组件

Human Interface Guidelines — Interface Essentials

1387
来自专栏Android知识点总结

4-VVI-材料设计之沉浸标题栏和TextInputLayout

783
来自专栏杨龙飞前端

网页html结构搭建方法总结

3226
来自专栏Rindew的iOS技术分享

iOS 一个可滑动缩放的轮播图

1696

扫码关注云+社区