图标在一张图内做法

参考QQ微博的做法：icon:两张图标上下结构在一张图内，需要分别显示在两个地方。

icon:

需做成的样子：

.header .qqwb ul li{ display: inline-block;/* 使QQ登录和微博登录显示在同一行,且可以改变框的大小.*/}.header .qqwb ul li a{border: 1px solid #000;color: white;text-decoration: none;/*列表前面的小黑点去掉*/background-image: url(../img/login-icon.gif); /*插入QQ微博背景图片,为一张，因为两个a,所以分别插入一张，共两张*/background-repeat: no-repeat; /*不平铺,此时两个QQ图片,即只显示了上半部分.*//*width: 100px;*/ display: inline-block;/* a是内联标签,需转成内联块,使框能改变高度,变大,使图标显示完全.*/padding-left: 28px; /* 使文字在框内右移出一个图标的宽度*/height: 28px; /*框的高度为28,图片高度的一半*/line-height: 28px; /* 使文字在框中垂直居中显示*/}.header .wb{background-position-y: -28px; /*给微博单设一个class,使图片上移一半,则显示微博图标.*/}<div class="header"><div class="qqwb"><ul><li><a href="">QQ登录</a></li><li><a href="" class="wb">微博登录</a></li></ul></div></div>

所以，总结出多图标都在一个图内利用背景图片的特性可以这样操作:

a=标签；

需要图标超链接可以加上a标签，否则不用加，a代表的是图标所在标签。

1.首先把a标签变成内联块，可以控制背景图片的宽高。

2.a的宽高要和每一个图标宽高相同，这样做出一个图标后，其他可以通过控制背景图片位置获得。

3.背景图片注意要不平铺

4.或者，文字和这个icon分开写，避免文字padding问题和背景图片过宽。

<div class="allicons"><ul><li><a href="">图标1</a></li><li><a href="" class="icon2">图标2</a></li><li><a href="" class="icon3">图标3</a></li></ul></div>.allicons ul li{ display: inline-block;/* 变成内联块，并且一行.*/}.allicons ul li a{display: inline-block; /* a是内联标签,需转成内联块,使框能改变高度,变大,使图标显示完全.*/background-image: url(../img/xxx); /*插入全icons背景图片*/background-repeat: no-repeat;/*不平铺,要显示出一个icon即可*/width: 100px; /*icon+文字的宽，没有文字就是icon的宽*/ height: 28px; /*每个icon的高*/padding-left: 28px;/* 图标是背景，这个时候文字和图标是重合的，需使文字在框内右移出一个图标的宽度*/line-height: 28px; /* 文字行高设置和icon一样高，使文字在框中垂直居中显示*/color: white; /* 文字颜色*/text-decoration: none; /*列表前面的小黑点去掉*/border: 1px solid #000; /*能看清楚点儿*//* background-position-x: -xxxpx;*/ /*图标左上需要调节一下，图标不是和图片左上重合的*//*background-position-y: 1px;*/}.allicons .icon2{background-position-y: -xxxpx; /*给其他单设class,调整他们位置.*/background-position-x: xxxpx;}.allicons .icon3{background-position-y: -xxxpx; background-position-x: xxxpx;}

目前这个做法不完善，会接着补充…

如果觉得《css多图标在一张图内如何正确显示它们》对你有帮助，请点赞、收藏，并留下你的观点哦！