[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 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React第三方组件3(状态管理之Flux的使用⑤异步操作)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件3(状态管理之Flux的使用①简单...

3144
来自专栏前端布道

桌面端前端性能优化策略

例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:

812
来自专栏前端人人

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2964
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

2565
来自专栏安富莱嵌入式技术分享

emWin收音机,含uCOS-III和FreeRTOS两个版本

第11期:收音机 配套例子: V6-919_STemWin提高篇实验_收音机(uCOS-III) V6-920_STemWin提高篇实验_收音机(FreeRTO...

844
来自专栏运维前线

kvm基础使用及Virt-tools工具使用

kvm基础使用 查看虚拟机状态 [root@sh-kvm-1 ~]# virsh list --all Id Name ...

2398
来自专栏九彩拼盘的叨叨叨

Web Workers 介绍

有时候,我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中,浏览器会出现冻结用户界面的情况(用户对页面进行操作,但浏览器没有响应)。

692
来自专栏java一日一条

9 款样式华丽的 jQuery 日期选择和日历控件

现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQu...

551
来自专栏华仔的技术笔记

用Vapor将一个Swift区块链应用部署到云端

3357
来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

3898

扫码关注云+社区