css多图标在一张图内如何正确显示它们

图标在一张图内做法

参考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;
}

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