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

相关文章

来自专栏柠檬先生

VUE 入门基础(1)

一,安装 Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼...

276100
来自专栏前端杂货铺

IE6下的png透明图片的背景定位

在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。 另外,由于IE6下的 :ho...

38190
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大...

23290
来自专栏携程技术中心

浅谈SVG Sprite

随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon font应运而生,字体图标的制作也是一种全新的设计...

25490
来自专栏HTML5学堂

readonly 和 disable的区别

readonly和disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对inpu...

36140
来自专栏极乐技术社区

微信小程序开发小技巧合揖(53个)

微信小程序:wx.navigateTo中url无法跳转问:链接 微信小程序布局之行内元素和块级元素:链接 小程序端JS加密,传输PHP端解密:链接 小程序开发干...

49190
来自专栏数据小魔方

动态图表系列4|列表框(index函数)

今天跟大家分享动态图表系列3——列表框(index函数)! 数据与之前的数据一致,核心技巧只有两点: 使用列表框制作动态数据源; 使用 动态数据源插入动态图表。...

35570
来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

33530
来自专栏HTML5学堂

原来“神笔马良”的那根“笔”也可以写代码

HTML5学堂:在大家都羡慕“神笔马良”拥有那支无所不能的笔时,在前端开发中,也出现了一支很神奇的“笔”——CodePen,顾名思义,code+pen,即是代码...

38650
来自专栏崔庆才的专栏

腾讯云Ubuntu搭建Selenium+PhantomJS环境过程

前言大部分网页可以直接请求爬取,但是如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没天理了。所以,...

81900

扫码关注云+社区

领取腾讯云代金券