首先准备一个32*32 格式为 ico 的图标
方法/步骤
1
先做好一张格式为ico的图标(我就是用在线工具转换为ico格式的)
2
打开页面代码,找到<head>标签,在<head></head>标签中插入一句,
<link href="/favicon.ico" rel="shortcut icon">
请点击输入图片描述
3
ok啦,运行一下你的网页,看看是不是有图标了呢?
请点击输入图片描述
END
注意事项
图标格式一定要是ico格式的
图片路径要写正确
在jquery easy-ui目录下的themes/icon.css。这个css文件打开你就知道了。里面都是icon的css。你可以任意添加。一下是默认的icon css:
.icon-blank {background: url('icons/blank.gif') no-repeat center center
}
.icon-add {
background: url('icons/edit_add.png') no-repeat center center
}
.icon-edit {
background: url('icons/pencil.png') no-repeat center center
}
.icon-remove {
background: url('icons/edit_remove.png') no-repeat center center
}
.icon-save {
background: url('icons/filesave.png') no-repeat center center
}
.icon-cut {
background: url('icons/cut.png') no-repeat center center
}
.icon-ok {
background: url('icons/ok.png') no-repeat center center
}
.icon-no {
background: url('icons/no.png') no-repeat center center
}
.icon-cancel {
background: url('icons/cancel.png') no-repeat center center
}
.icon-reload {
background: url('icons/reload.png') no-repeat center center
}
.icon-search {
background: url('icons/search.png') no-repeat center center
}
.icon-print {
background: url('icons/print.png') no-repeat center center
}
.icon-help {
background: url('icons/help.png') no-repeat center center
}
.icon-undo {
background: url('icons/undo.png') no-repeat center center
}
.icon-redo {
background: url('icons/redo.png') no-repeat center center
}
.icon-back {
background: url('icons/back.png') no-repeat center center
}
.icon-sum {
background: url('icons/sum.png') no-repeat center center
}
.icon-tip {
background: url('icons/tip.png') no-repeat center center
}
.icon-mini-add {
background: url('icons/mini_add.png') no-repeat center center
}
.icon-mini-edit {
background: url('icons/mini_edit.png') no-repeat center center
}
.icon-mini-refresh {
background: url('icons/mini_refresh.png') no-repeat center center
}
.icon-recommend {
background: url('icons/recommend-1.gif') no-repeat center center
}
.icon-deploy {
background: url('icons/status-1.gif') no-repeat center center
}
.icon-comment {
background: url('icons/comment-1.gif') no-repeat center center
}
.icon-not-recommend {
background: url('icons/recommend-0.gif') no-repeat center center
}
.icon-not-deploy {
background: url('icons/status-0.gif') no-repeat center center
}
.icon-not-comment {
background: url('icons/comment-0.gif') no-repeat center center
}
.icon-move {
background: url('icons/move.gif') no-repeat center center
}
/*比如需要添加一个全屏的icon
①把icon图片放到themes/icons文件夹下(假设icon文件名为:icon-fullscreen.png)。
②在themes/icon.css是添加css
*/
.icon-fullscreen {
background: url('icons/icon-fullscreen.png') no-repeat center center
}
/*这样就完成了自定义icon的添加*/
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)