使用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 ...
随机推荐
- SQLSERVER走起微信公众帐号已经开通搜狗微信搜索
SQLSERVER走起微信公众帐号已经开通搜狗微信搜索 请打开下面链接 http://weixin.sogou.com/gzh?openid=oIWsFt-hiIb_oYqQHaBMoNwRB2wM ...
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- SSH实战 · 唯唯乐购项目(上)
前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...
- Android注解使用之注解编译android-apt如何切换到annotationProcessor
前言: 自从EventBus 3.x发布之后其通过注解预编译的方式解决了之前通过反射机制所引起的性能效率问题,其中注解预编译所采用的的就是android-apt的方式,不过最近Apt工具的作者宣布了不 ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
- windows+nginx+iis+redis+Task.MainForm构建分布式架构 之 (nginx+iis构建服务集群)
本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,由标题就能看出此内容不是一篇分享文章能说完的,所以我打算分几篇分享文章来讲解,一步一步实现分 ...
- C# await和async
基础阅读:http://www.cnblogs.com/jesse2013/p/async-and-await.html 答疑阅读:http://www.cnblogs.com/heyuquan/ar ...
- RSA非对称加密,使用OpenSSL生成证书,iOS加密,java解密
最近换了一份工作,工作了大概一个多月了吧.差不多得有两个月没有更新博客了吧.在新公司自己写了一个iOS的比较通用的可以架构一个中型应用的不算是框架的一个结构,并已经投入使用.哈哈 说说文章标题的相关的 ...
- 【转】为什么我们都理解错了HTTP中GET与POST的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...