使用webfont为easyui扩充图标
目前回到pc端开发,开始用了easyui这个框架。重拾easyui后感觉这个框架用的很多技术太古老,页面风格也太控件化。单从图标一项来说吧,这种花花绿绿的图标用户一看都傻了眼,同时整个框架就提供了那么几种图标,很多按钮和菜单需要自己做图标。
有没有方便快捷扩充图标的方法呢?其实非常简单,可以使用webfont图标。webfont是一种将矢量字体文件扩充到浏览器上的技术,他出现的初衷是扩展客户端的字体,避免因为客户端因为设备上的字体缺失,而造成显示异常的情况。从服务器上下载字体并显示,如果仅仅是英文26个字母的话,这个思路还是可行的,但是实际应用过程中因为Unicode码是在太大了,例如汉字,上万个文字都需要从服务器上下载字体很显然是不现实的,所以实际应用中webfont更多的是用在图标方面。webfont图标在如今的pc端和移动端都在大量使用,我们熟悉的bootstarp3所用的图标就是这种webfont式的图标。
既然想到了技术方案,那么如何快速扩充easyui的图标呢?这个很简单,因为现在的webfont制作技术已经非常成熟,很多在线工具就直接提供webfont的制作,这里介绍两个工具资源:
1.http://www.iconfont.cn/ 挂着阿里名头的图标制作网站,里面有很详细的webfont制作教程,更重要的是他还提供了大量的阿里及第三方图标库,可以快速地导出这些现成的图标。
2.http://fontello.com/ 一家外国网站,整合了很多知名的webfont图标库,同时还支持导入上传现成的图标库和矢量图,比阿里好的地方是他支持自己定义图标的名字及排列顺序。
使用这些图标资源就可以快速地扩充我们自己项目的图标库,同时还不需要专门的美工,真可谓经济实惠^_^。
那么问题来了,如何与easyui整合?其实很简单,webfont的使用方式有两种:
1.使用字体的方式,因为webfont的本质就是字体,所以将每一个图标对应的字符放进我们要显示图标的位置上,并在style里设置好字符的字体,这样这个字符就被渲染为图标了。
2.使用class,其实和上边的差不多,只是定义好一组class,在class里面将webfont的对应字体设置到content属性里,再设置字体,这样就省去了自己维护字符的过程。
具体改造过程:
1.从http://fontello.com/的图标库里面挑选需要的图标,然后修改各个图标的名字,这里我就挑选了easyui图标库涵盖的图标,并将他们的名字按照easyui图标库对应的名字命名。
2.解压后会的目录结构如下:
css和font就是我们图标所保存的文件,因为webfont其实是矢量图,font就是各个浏览器下的矢量图文件,而css是我们调用的库。demo.html是工具网站给我的查看工具,可以浏览demo.html迅速确定我们的class名称。
3.使用的时候不要引入easyui的icon.css文件,而引入我们css目录下的fontello.css,如果需要动画还可以引入animation.css文件。
优点:
其实就是webfont的优点
1.矢量图,资源小,并支持无限制的缩放(支持缩放在easyui里不是很明显)。
2.支持动态改变颜色,方便做高亮显示图标(这个以往用图片做的话非常麻烦,往往要做两套图)。
3.存在现成的图标库,基本能够满足需求,无需再找美工制作。
4.扁平化图标更好看。
缺点:
1.各个图标库的图标大小略有不同,会导致图标并排显示的时候给人不整齐的感觉。
2.webfont这项技术浏览器兼容性差(其实只要不是古董浏览器都支持,可是easyui就是个古董)。
使用webfont为easyui扩充图标的更多相关文章
- 使用Font Awesome替换EasyUI的图标
用过EasyUI的朋友都知道,大部分组件都有一个iconCls属性,用于显示一个图标.但是EasyUI自带图标数量少.不美观,于是想到了使用Font Awesome来更换和拓展这些图标. 先看看Eas ...
- jquery easyui添加图标扩展
easyui中有很多通过iconCls="icon-reload"这样的属性引入小图标显示,当然我们也可以自己添加自己的小图标. 方式:1.我们可以在jquery easyui的文 ...
- easyui 放大镜图标
iconCls:search 对应的 easyui的查询图标忒丑 想用放大镜图标 iconCls:zoom 找半天找到放大镜图标的 然后去icon.css文件中查 发现这个样式就叫zoom.
- WebFont与页面font-icon图标研究
当你打开(绝大部分)网站,页面上将会有许多形形色色的小图标(icon),适当的icon的可以达到一图胜千言的目的,使网页的表现效果更佳. 关于页面icon的制作,比较传统的方法是,让设计师去设计一个个 ...
- [转]easyui 全部图标
原文地址:http://blog.163.com/shexinyang@126/blog/static/136739312201491011492263/ 拿jquery-easyui-1.2.6举例 ...
- easyUI默认图标的使用
使用格式如下: <table id="table" class="easyui-datagrid" style="width:600px;hei ...
- jquery easyui 全部图标
所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用 jquery-easyui-1.2.6/themes/icon.css .i ...
- easyui加入自己定义图标
近期用easyui发现图标挺少的,事实上能够另外加入一个css样式,只是我偷懒,直接在easyui的css里面加入了. 以下是文件夹: icon.css是easyui的默认样式文件.ext_icons ...
- easyui图标对照
转自:https://blog.csdn.net/qq_34545192/article/details/78250816 原作者文章地址: http://www.cnblogs.com/timeme ...
随机推荐
- 将表里的数据批量生成INSERT语句的存储过程 增强版
将表里的数据批量生成INSERT语句的存储过程 增强版 有时候,我们需要将某个表里的数据全部或者根据查询条件导出来,迁移到另一个相同结构的库中 目前SQL Server里面是没有相关的工具根据查询条件 ...
- 开源:Taurus.MVC 框架
为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...
- HTML骨架结构
前面的话 一个完整的HTML文档必须包含3个部分:文档声明.文档头部和文档主体.而正是它们构成了HTML的骨架结构.前面已经分别介绍过文档声明和文档头部,本文将详细介绍构成HTML骨架结构的基础元 ...
- Nexus(一)环境搭建
昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...
- Lind.DDD.LindAspects方法拦截的介绍
回到目录 什么是LindAspects 之前写了关于Aspects的文章<Lind.DDD.Aspects通过Plugins实现方法的动态拦截~Lind里的AOP>,今天主要在设计思想上进 ...
- .net core和angular2之前端篇—1
2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是 ...
- maven 快照
大型应用软件一般由多个模块组成,一般它是多个团队开发同一个应用程序的不同模块,这是比较常见的场景.例如,一个团队正在对应用程序的应用程序,用户界面项目(app-ui.jar:1.0) 的前端进行开发, ...
- 用Swagger生成接口文档
Swagger简介 在系统设计的时候,各个应用之间往往是通过接口进行交互的.因此接口的定义在整个团队中就变得尤为重要.我们可以把接口的规范用接口描述语言进行描述,然后Swagger可以根据我们定义的接 ...
- Mysql - 触发器/视图
触发器在之前的项目中, 应用的着实不多, 没有办法的时候, 才会去用这个. 因为这个东西在后期并不怎么好维护, 也容易造成紊乱. 我最近的项目中, 由于数据库设计(别人设计的)原因, 导致一些最简单功 ...
- Spring MVC重定向和转发以及异常处理
SpringMVC核心技术---转发和重定向 当处理器对请求处理完毕后,向其他资源进行跳转时,有两种跳转方式:请求转发与重定向.而根据要跳转的资源类型,又可分为两类:跳转到页面与跳转到其他处理器.对于 ...