HTML如何给网页添加ico图标?

HTML如何给网页添加ico图标?,第1张

首先准备一个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的添加*/


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11248973.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存