现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。
如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。
当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的条件。
一般都会把图标文件做的尽可能小，尽管如此，1张50k的文件比起50张1k文件下载起来还是很有优势的。
那么，要如何将一个图片中的单个图标显示在页面中，因为没有切分图片的功能。
首先，假设我们的图标图片是tree view中常用的：
做一个简单的页面，放两个div，需要在这两个div上分别显示文件夹和文件图标。
&!DOCTYPE html&
&meta charset="utf-8"&
&div&&/div&
&div&&/div&
显示方法很简单，就是将元素的大小设成图标的大小，图片作为元素的背景，设置图片的left和top让对应的图标被显露出来。
定义一个默认的样式，规定元素的大小，这里的图标是32*32，照样设置元素的大小。
.tree-default{
定义文件夹图标的显示样式，就是讲图标图片作为背景，按照图标的位置调整left和top坐标值。
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-
定义文件图标的显示样式，调整文件图标所在的位置。
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-
再给元素设上样式。
&div class="tree-default tree-file"&&/div&
&div class="tree-default tree-folder"&&/div&
完成后的效果：
这样的处理也不是没有条件，单张图片也要尽可能的压缩，不是所有的图标都在一张图片上，可将常用的放在一张图片上，如果过多可分成多张图片放置。
所有代码：
&!DOCTYPE html&
&meta charset="utf-8"&
.tree-default{
width:32px;
height:32px;
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
&div class="tree-default tree-file"&&/div&
&div class="tree-default tree-folder"&&/div&
阅读(...) 评论()【交流】左上角怎么两个图标_一加手机吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
【交流】左上角怎么两个图标收藏
系统的问题吧 我还碰到过右上时间一直不变 主页的已经走了十几分
围观———————————————————白龙马?，蹄朝西?，驼着小楼主?，跟着群水笔?。贴吧升级不容易?，不水怎么能升级?，什么吧务管理什么吧主封你?，81难拦路72变制敌?，楼主吧友齐心协力?，一直水到18级 。。。。。。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或请问图片里面第二个标志是什么牌子？_百度知道请问图片中QQ旁边那一个图标什么意思_百度知道请问图中上下2个括号是什么符号呀？？？
在图论书中看见的，请大侠前来教我~~~
已有帐号？
无法登录？
社交帐号登录}