sicknss剖解整理

如果项目里用到很多，建议使用官方文档

纯CSS实现的响应式Icon - 兼容IE8+

43个纯CSS图标

---

如home:

html:

<span></span>

css:

span{
position: absolute;
top: 0;
left: .125em;
width: .25em;
height: .5em;
background-color: rgb(102, 102, 102);
}
span:before,span:after{
content: "";
position: absolute;
border-style: solid;
}
span:before{
top: .5em;
left: 0;
width: .25em;
height: .3125em;
border-width: .1875em .25em 0 .25em;
border-color: rgb(102, 102, 102);
}
span:after{
top: -.5em;
left: -.125em;
width: 0;
height: 0;
border-width: .5em;
border-color: transparent transparent rgb(102, 102, 102) transparent;
}

调整图案大小：给span设置font-size,rem或px

span{
font-size: 2rem;
//font-size: 24px;
}

图标

span

span:before,span:after

span:before

span:after

position: absolute;
width: .25em;
height: .5em;
background-color: rgb(102, 102, 102);content: "";
position: absolute;
border-style: solid;top: .5em;
left: 0;
width: .25em;
height: .3125em;
border-width: .1875em .25em 0 .25em;
border-color: rgb(102, 102, 102);top: -.5em;
left: -.125em;
width: 0;
height: 0;
border-width: .5em;
border-color: transparent transparent rgb(102, 102, 102) transparent;

position: absolute;
width: .5em;
height: .5em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
width: 0;
height: 0;
border-width: .5em;
border-style: solid;
top: -.25em;
left: .5em;
border-color: transparent transparent transparent rgb(102, 102, 102);

position: absolute;
width: .5em;
height: .5em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
width: 0;
height: 0;
border-width: .5em;
border-style: solid;
top: -.25em;
right: .5em;
border-color: transparent rgb(102, 102, 102) transparent transparent;

position: absolute;
width: .5em;
height: .5em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
width: 0;
height: 0;
border-width: .5em;
border-style: solid;
top: .5em;
left: -.25em;
border-color: rgb(102, 102, 102) transparent transparent transparent;

position: absolute;
width: .5em;
height: .5em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
width: 0;
height: 0;
border-width: .5em;
border-style: solid;
left: -.25em;
top: -1em;
border-color: transparent transparent rgb(102, 102, 102) transparent;

position: absolute;
width: 1em;
height: .75em;
background-color: rgb(102, 102, 102);
border-radius: .125em;

  

content: "";
position: absolute;
border-style: solid;
top: .75em;
left: .25em;
width: 0;
height: 0;
border-width: .125em;
border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102);

同上

content: "";
position: absolute;
border-style: solid;

top: .1875em;
left: .125em;
width: .75em;
height: .125em;
border-width: .09375em 0;
border-color: rgb(249, 249, 249);

top: .75em;
left: .25em;
width: 0;
height: 0;
border-width: .125em;
border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102);

同上

content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-width: .4em .5em;
border-style: solid;

top: 0;
border-color: rgb(249, 249, 249) transparent transparent transparent;

top: -.0625em;
border-color: rgb(102, 102, 102) transparent transparent transparent;

position: absolute;
width: .875em;
height: .6875em;
border-width: .125em .0625em .0625em .0625em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);
border-radius: .0625em;

 

content: "";
position: absolute;
top: -.25em;
left: .125em;
width: .375em;
height: .125em;
border-width: 0 .125em;
border-style: solid;
border-color: rgb(102, 102, 102);

content: "26";
position: absolute;
top: -.25em;
left: 0;
font-family: Arial, sans-serif;
font-size: .5em;
font-weight: bold;
color: rgb(102, 102, 102);

border-width: 0 .25em .25em 0;
position: absolute;
width: .375em;
height: .375em;
border-style: solid;
border-color: rgb(102, 102, 102);

  

content: "";
top: .375em;
left: .375em;
border-width: .25em 0 0 .25em;
position: absolute;
width: .375em;
height: .375em;
border-style: solid;
border-color: rgb(102, 102, 102);

position: absolute;
width: 1em;
height: .25em;
background-color: rgb(102, 102, 102);

   

position: absolute;
width: .5em;
height: .75em;
border-width: .125em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);
border-radius: .0625em;

 

content: "";
position: absolute;
top: -.125em;
left: -.125em;
width: 0;
height: 0;
border-width: .15625em;
border-style: solid;
border-color: rgb(255, 255, 255) rgb(102, 102, 102) rgb(102, 102, 102) rgb(255, 255, 255);

 

position: absolute;
width: 1em;
height: .875em;
background-color: rgb(102, 102, 102);
border-bottom-left-radius: .0625em;
border-bottom-right-radius: .0625em;

 

content: "";
position: absolute;
top: -.125em;
left: .125em;
width: .375em;
height: .125em;
background-color: rgb(102, 102, 102);
border-top-left-radius: .0625em;
border-top-right-radius: .0625em;

 

position: absolute;
width: .5em;
height: .75em;
background-color: rgb(102, 102, 102);
border-top-left-radius: .0625em;
border-top-right-radius: .0625em;

content: "";
position: absolute;
top: .75em;
width: 0;
height: 0;
border-width: .125em;
border-style: solid;

left: 0;
border-color: rgb(102, 102, 102) transparent transparent rgb(102, 102, 102);

left: .25em;
border-color: rgb(102, 102, 102) rgb(102, 102, 102) transparent transparent;

position: absolute;
width: .875em;
height: .625em;
border-width: .0625em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);
border-radius: .0625em;

content: "";
position: absolute;
background-color: rgb(102, 102, 102);

top: .6875em;
left: .3125em;
width: .25em;
height: .1875em;

top: .875em;
left: .125em;
width: .625em;
height: .0625em;

position: absolute;
width: .75em;
height: .625em;
border-width: .125em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);
border-radius: .0625em;

 

content: "";
position: absolute;
top: .28125em;
left: -.09375em;
width: .0625em;
height: .0625em;
background-color: rgb(255, 255, 255);
border-radius: .0625em;

 

position: absolute;
width: .5em;
height: .75em;
border-width: .125em .0625em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);
border-radius: .0625em;

  

content: "";
position: absolute;
top: .78125em;
left: .21875em;
width: .0625em;
height: .0625em;
background-color: rgb(255, 255, 255);
border-radius: .0625em;

position: absolute;
width: 1em;
height: .25em;
background-color: rgb(102, 102, 102);
width: 1em;
height: .25em;
background-color: rgb(102, 102, 102);

content: "";
position: absolute;
left: 0;
width: 1em;
height: .25em;
background-color: rgb(102, 102, 102);

top: .3125em;top: .625em;

position: absolute;
width: .25em;
height: .5em;
background-color: rgb(102, 102, 102);

 

content: "";
position: absolute;
left: -.125em;
width: 0;
height: 0;
border-width: .25em;
border-style: solid;
top: .5em;
border-color: rgb(102, 102, 102) transparent transparent transparent;

content: "";
position: absolute;
left: -.375em;
width: .75em;
height: .125em;
border-width: 0 .125em .125em .125em;
border-style: solid;
border-color: rgb(102, 102, 102);
top: .75em;

同上 

content: "";
position: absolute;
left: -.125em;
width: 0;
height: 0;
border-width: .25em;
border-style: solid;
top: -.5em;
border-color: transparent transparent rgb(102, 102, 102) transparent;

content: "";
position: absolute;
left: -.375em;
width: .75em;
height: .125em;
border-width: 0 .125em .125em .125em;
border-style: solid;
border-color: rgb(102, 102, 102);
top: .5em;

position: absolute;
width: 1em;
height: .25em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
top: .3125em;
height: .6875em;
background-color: rgb(102, 102, 102);
left: 0;
width: 1em;

同上

content: "";
position: absolute;
top: .3125em;
height: .6875em;
background-color: rgb(102, 102, 102);

width: .6875em;
left: 0;

width: .25em;
left: .75em;

同上同上

width: .25em;
left: 0;

width: .6875em;
left: .3125em;

position: absolute;
width: .0625em;
height: .25em;
border-width: 0 .6875em 0 .25em;
border-style: solid;
border-color: rgb(102, 102, 102);

position: absolute;
width: .0625em;
height: .25em;
border-width: 0 .6875em 0 .25em;
border-style: solid;
border-color: rgb(102, 102, 102);

content: "";
top: .3125em;
left: -.25em;

content: "";
left: -.25em;
top: .625em;

position: absolute;
width: .0625em;
height: .46875em;
border-width: 0 .46875em;
border-style: solid;
border-color: rgb(102, 102, 102);

 

content: "";
top: .53125em;
left: -.46875em;
position: absolute;
width: .0625em;
height: .46875em;
border-width: 0 .46875em;
border-style: solid;
border-color: rgb(102, 102, 102);

 

position: absolute;
width: .75em;
height: .5em;
background-color: rgb(102, 102, 102);

  

content: "";
position: absolute;
top: 0;
left: .5em;
width: 0;
height: 0;
border-width: .25em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;

position: absolute;
width: .875em;
height: .625em;
border-width: .0625em;
border-style: solid;
border-color: rgb(102, 102, 102);
border-radius: .0625em;

content: "";
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent rgb(102, 102, 102) transparent;

left: 0;
border-width: .25em .25em .125em .125em;

right: 0;
border-width: .25em .25em .375em .375em;

position: absolute;
width: 0;
height: 0;
border-width: .5em .625em;
border-style: solid;
border-color: transparent transparent transparent rgb(102, 102, 102);

   

position: absolute;
width: .875em;
height: .875em;
background-color: rgb(102, 102, 102);

   

position: absolute;
width: .25em;
height: .875em;
background-color: rgb(102, 102, 102);

  

content: "";
top: 0;
left: .3125em;
position: absolute;
width: .25em;
height: .875em;
background-color: rgb(102, 102, 102);

position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent transparent transparent rgb(102, 102, 102);

  

content: "";
top: -.4375em;
position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent transparent transparent rgb(102, 102, 102);

同上 

content: "";
top: -.4375em;
border-color: transparent transparent transparent rgb(102, 102, 102);
left: 0;
position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;

content: "";
top: -.4375em;
left: .4375em;
position: absolute;
width: .125em;
height: .875em;
background-color: rgb(102, 102, 102);

position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;

  

content: "";
top: -.4375em;
right: 0;
position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;

position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;

content: "";
top: -.4375em;

position: absolute;
width: 0;
height: 0;
border-width: .4375em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;
right: 0;

position: absolute;
width: .125em;
height: .875em;
background-color: rgb(102, 102, 102);
right: .4375em;

position: absolute;
width: .3125em;
height: .875em;
border-width: 0 .1875em;
border-style: solid;
border-color: rgb(102, 102, 102);

 

content: "";
top: .3125em;
left: .0625em;
height: .5625em;
position: absolute;
width: .3125em;
border-width: 0 .1875em;
border-style: solid;
border-color: rgb(102, 102, 102);

content: "";
position: absolute;
top: .875em;
left: -.1875em;
width: 1em;
height: .125em;
background-color: rgb(102, 102, 102);

position: absolute;
width: .75em;
height: .375em;
border-width: .0625em;
border-style: solid;
border-color: rgb(102, 102, 102);
background-color: rgb(249, 249, 249);

  

content: "";
position: absolute;
top: .0625em;
left: .8125em;
width: .125em;
height: .25em;
background-color: rgb(102, 102, 102);

同上 

content: "";
position: absolute;
top: 0;
left: 0;
height: .375em;
background-color: rgb(153, 153, 153);

width: .1875em;

同上同上 

同上

width: .375em;

同上同上 

同上

 width: .5625em;

同上同上 

同上

width: .75em;

同上

position: absolute;
width: .25em;
height: .25em;
background-color: rgb(102, 102, 102);

 

content: "";
position: absolute;
top: -.3125em;
left: -.3125em;
width: .375em;
height: .375em;
border-width: .25em;
border-style: solid;
border-color: transparent rgb(102, 102, 102) transparent transparent;

 同上 同上

content: "";
position: absolute;
top: -.125em;
left: .625em;
width: .0625em;
height: .53125em;
border-style: solid;
border-color: rgb(102, 102, 102);

border-width: 0 0 0 .0625em;

同上 同上

 同上

border-width: 0 .0625em;