EasyUI中使用自定义的icon图标
我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里卖弄加入我们想要的图标,并且在页面中能使用
这是手风琴的效果,左边可以看到有两个图标,一个是小人,一个是菜单的模样,菜单的那个是我自己新加的,那么下面就介绍如何把一个自己的图标配置到EasyUI框架中,并且能正常使用!
1.第一步,我们在项目中配置好EasyUI的环境,也就是要使用它,必须做的事情,这里就不细说了
2.第二步,复制官网上的手风琴的效果,粘贴到自己的jsp或者html网页代码中
这里我访问的是一个翻译过来的中文网,因为.....小金子的英语太棒了,我还是觉得看中文比较有挑战!
注意这里面引用了三个css样式文件和两个js脚本文件,这就是在第一步需要配置的,其实就是下载EasyUI,拿到解压后的文件夹,复制里面的
themes文件夹到WebRoot下,两个如图的js脚本复制到任意目录下,因为路径是在使用的时候配置的,但是themes这个文件不能随意放,必须在WebRoot文件夹下!.担心有小白...竟然又默默的讲完了....
3.第三步,就是拿浏览器访问,就可以看到有手风琴的效果啦,这时候我们可以看到源代码中有这样子的代码:
这里就是使用了它自带的图标,果断找到自带的图标所在文件夹,怎么找?
你可以借助浏览器嘛,在浏览器中你可以右键这个图标,就可以看到这个图标的信息了:
找到项目中的文件
这时候我们放入一张我们自己的icon,因为自带的都是16*16的,所以我们也放入一张16*16的,没有图标?http://www.easyicon.net/
去吧,皮卡丘,里面有海量图标等着你...
放入了一张自己的,这时候我们学着之前的引用图片的方法,把原来的icon-ok呀,或者icon-man啊这些属性改成自己的,也就是-后面的替换掉,换成icon-menu,好的,开发浏览器进行访问,结果....不能用,这时候我们回到我们寻找这张图片地址的那张图片上去,仔细观察!你会发现图片的右边有一段代码
是css的代码,并且它为什么能用,就是因为在icon.css的61行有这么一段css代码,造成了自带的icon-man图标能正常使用,所以我们明白了,我立马找到icon.css文件,照猫画虎的填上这么一段代码:
好了,大功告成!能正常使用啦!
总结:EasyUI要使用自定义图标的步骤
1.在/themes/icons/ 下添加自定义的图片
2.在/themes/icon.css中配置这个图片
EasyUI中使用自定义的icon图标相关推荐
- html中给地址栏添加icon图标
<link rel="icon" href="images/logo.ico" type="image/x-icon"/> 也可 ...
- jQuery easyui中combox 自定义样式 去掉下拉框的空白
EasyUI中combox下拉框的默认样式 有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白: <div style ...
- 在Vue3中使用Element Plus Icon图标的几种方式
安装 Element Plus $ npm install @element-plus/icons 在main.js 引入 import * as ElIcon from '@element-plus ...
- easyui tree去掉文件夹icon图标
文章目录 easyui tree去掉文件夹节点图标 效果图 js代码 html easyui tree去掉文件夹节点图标 效果图 js代码 html代码 效果图 js代码 /************* ...
- EasyUI 自定义组件 icon 图标
前言 EasyUI 自带的 icon 就 二十多个(1.3.3版本) 明显是不足的,而且不能很好适应主题,如此一来,自定义 icon 就显得十分重要了 步骤 1.准备好图片 这里推荐一个挺好的图标库 ...
- 微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
- Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂,风趣幽默",感觉非常有意思,忍不住分享一下给大家.
- vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标 一. 在项目中引入阿里云icon图标 二. 在data中定义icon图标列表 三. 在下拉框中显示icon图标 四. 在列表中显示icon图标 五. 在el-c ...
- vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家 效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
最新文章
- html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
- [博客之路]如何增加一个博客的PR值(一)
- Nancy之Forms验证
- CVPR2016:ResNet 从根本上解决深度网络退化问题
- write up web:网站被黑
- Map Reduce和流处理
- bootstrapV4.6.0内间距、外间距(官方hack类css代码)-解读篇
- RTMPdump 使用说明
- php 按行读取并分割字符串
- 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题
- 输入法半角和全角的快捷转换_华宇拼音输入法 一款完全免费的国产输入法_应用新闻-产经频道-中文科技资讯...
- chrome 插件 IE Tab Multi 一款最接近 IE 的 Chrome扩展
- java图片转pdf_java使用itextpdf将图片转换成pdf的简单实例 | 学步园
- google浏览器被360导航劫持
- 数据分析|Python|拼多多优惠券使用预测分析报告
- virtualbox 菜单栏不见了---如何调出来
- 微信开发生成测试签名--signature,并使用微信jssdk获取位置
- 家具生产设备_家具生产线
- BlueTooth Android开发基础
- 杂七杂八(9): IDEA初始化配置 插件收集