/* 
   <link type="text/css" rel="styleSheet" href="/CSS/css-icon.css">
    <i class="css-icon-zanting"></i>
    <i class="css-icon-true"></i>
    <i class="css-icon-false"></i>
    <i class="css-icon-menu"></i>
    <i class="css-icon-menu2"></i>
    <i class="css-icon-download"></i>
    <i class="css-icon-upload"></i>		
    <i class="css-icon-video"></i>
    <i class="css-icon-voice"></i>
    <i class="css-icon-play"></i>
    <i class="css-icon-previous"></i>		
    <i class="css-icon-next"></i>
    <i class="css-icon-stop"></i>
    <i class="css-icon-position"></i>
    <i class="css-icon-pc"></i>
    <i class="css-icon-phone"></i>
    <i class="css-icon-search"></i>
    <i class="css-icon-star"></i>
    <i class="css-icon-email"></i>
    <i class="css-icon-eye"></i>
    <i class="css-icon-unlock"></i>
    <i class="css-icon-cup"></i>
    <i class="css-icon-heart"></i>
    <i class="css-icon-home"></i>
    <i class="css-icon-password"></i>
    <i class="css-icon-user"></i>
    <i class="css-icon-menu3"></i>
*/


/* * {margin: 0;padding: 0;} */
/* i {display: inline-block;} */
.css-icon-zanting {box-sizing: border-box;position: relative;width: 2em;height: 2em;border: .2em solid #000;border-radius: 50%;}
.css-icon-zanting:before {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: -.35em;width: .2em;height: .9em;background-color: #000;}
.css-icon-zanting:after {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: .15em;width: .2em;height: .9em;background-color: #000;}
.css-icon-true {position: relative;width: 1.2em;height: .3em;background-color: #000;transform: rotate(60deg);transform-origin: right center;border-radius: .15em;}
.css-icon-true:after {content: "";position: absolute;top: .1em;left: -.85em;width: 2em;height: .3em;background-color: #000;transform: rotate(60deg);transform-origin: right center;border-radius: .15em;}
.css-icon-false {position: relative;width: 2em;height: .3em;background-color: #000;transform: rotate(45deg);border-radius: .15em;transform-origin: right center;}
.css-icon-false:after {content: "";position: absolute;width: 2em;height: .3em;background-color: #000;transform: rotate(90deg);border-radius: .15em;}
.css-icon-menu {box-sizing: border-box;position: relative;width: 2em;height: 2em;background-color: #000;border-radius: .3em;}
.css-icon-menu:before {box-sizing: border-box;content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 1.2em;height: .15em;background-color: #fff;}
.css-icon-menu:after {box-sizing: border-box;content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 1.2em;height: .9em;border-width: .15em;border-style: solid none;border-color: #fff;}
.css-icon-menu2 {box-sizing: border-box;position: relative;width: .5em;height: .5em;background-color: #000;border-radius: 50%;cursor: pointer;}
.css-icon-menu2:before {box-sizing: border-box;content: "";position: absolute;top: 0;left: -.75em;width: .5em;height: .5em;background-color: #000;border-radius: 50%;}
.css-icon-menu2:after {box-sizing: border-box;content: "";position: absolute;top: 0;left: .75em;width: .5em;height: .5em;background-color: #000;border-radius: 50%;}
.css-icon-download {box-sizing: border-box;position: relative;width: 2em;height: .8em;border-width: .3em;border-style: none solid solid;border-color: #000;}
.css-icon-download:before {content: "";position: absolute;right: 0;bottom: .7em;left: 0;margin: auto;width: .3em;height: 1em;background-color: #000;}
.css-icon-download:after {content: "";position: absolute;right: 0;bottom: .2em;left: 0;margin: auto;width: 0;height: 0;border-right: .6em solid transparent;border-top: .6em solid #000;border-left: .6em solid transparent;}
.css-icon-upload {box-sizing: border-box;position: relative;width: 2em;height: .8em;border-width: .3em;border-style: none solid solid;border-color: #000;}
.css-icon-upload:before {content: "";position: absolute;right: 0;bottom: .2em;left: 0;margin: auto;width: .3em;height: 1em;background-color: #000;}
.css-icon-upload:after {content: "";position: absolute;right: 0;bottom: 1.1em;left: 0;margin: auto;width: 0;height: 0;border-right: .6em solid transparent;border-bottom: .6em solid #000;border-left: .6em solid transparent;}
.css-icon-video {box-sizing: border-box;position: relative;width: 1.5em;height: 1.2em;background-color: #000;border-radius: .3em;}
.css-icon-video:after {content: "";position: absolute;top: 50%;left: 1.4em;margin-top: -.7em;width: 0;height: 0;border-top: .7em solid transparent;border-right: .6em solid #000;border-bottom: .7em solid transparent;}
.css-icon-voice {box-sizing: border-box;position: relative;width: 1.4em;height: 1em;border-width: .2em;border-style: none none solid;border-color: #000;border-radius: 50%;}
.css-icon-voice:before {content: "";position: absolute;right: 0;left: 0;bottom: .05em;margin: auto;width: .8em;height: 1.3em;background-color: #000;border-radius: .4em;}
.css-icon-voice:after {content: "";position: absolute;right: 0;bottom: -.6em;left: 0;margin: auto;width: 0;height: 0;border-right: .6em solid transparent;border-bottom: .4em solid #000;border-left: .6em solid transparent;}
.css-icon-play {box-sizing: border-box;position: relative;width: 2em;height: 2em;border: .2em solid #000;border-radius: 50%;}
.css-icon-play:after {content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: -.3em;/*没有让其左右居中，因为看起来右边更空一些*/width: 0;height: 0;border-top: .6em solid transparent;border-bottom: .6em solid transparent;border-left: .9em solid #000;}
.css-icon-previous {box-sizing: border-box;position: relative;width: 2em;height: 2em;border: .2em solid #000;border-radius: 50%;}
.css-icon-previous:before {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: -.65em;width: 0;height: 0;border-top: .45em solid transparent;border-bottom: .45em solid transparent;border-right: .6em solid #000;}
.css-icon-previous:after {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: -.2em;width: 0;height: 0;border-top: .45em solid transparent;border-bottom: .45em solid transparent;border-right: .6em solid #000;}
.css-icon-next {box-sizing: border-box;position: relative;width: 2em;height: 2em;border: .2em solid #000;border-radius: 50%;}
.css-icon-next:before {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: -.4em;width: 0;height: 0;border-top: .45em solid transparent;border-bottom: .45em solid transparent;border-left: .6em solid #000;}
.css-icon-next:after {box-sizing: border-box;content: "";position: absolute;top: 0;bottom: 0;left: 50%;margin-top: auto;margin-bottom: auto;margin-left: .05em;width: 0;height: 0;border-top: .45em solid transparent;border-bottom: .45em solid transparent;border-left: .6em solid #000;}
.css-icon-stop {box-sizing: border-box;position: relative;width: 2em;height: 2em;border: .2em solid #000;border-radius: 50%;}
.css-icon-stop:after {box-sizing: border-box;content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: .9em;height: .9em;background-color: #000;}
.css-icon-position {position: relative;width: .6em;height: .6em;border: .4em solid #000;border-radius: 50%;}
.css-icon-position:after {content: "";position: absolute;top: .55em;left: -.4em;width: 0;height: 0;border-top: 1em solid #000;border-right: .7em solid transparent;border-left: .7em solid transparent;border-top-left-radius: 50%;border-top-right-radius: 50%;}
.css-icon-pc {box-sizing: border-box;position: relative;width: 2em;height: 1.4em;border-width: .2em .2em .3em;border-style: solid;border-color: #000;border-radius: .2em;background-color: #efefef;}
.css-icon-pc:before {content: "";position: absolute;top: 1.2em;right: 0;left: 0;margin: auto;width: .6em;height: .4em;background-color: #000;}
.css-icon-pc:after {content: "";position: absolute;top: 1.6em;right: 0;left: 0;margin: auto;width: 1.6em;height: .2em;background-color: #000;}
.css-icon-phone {box-sizing: border-box;position: relative;width: 1.4em;height: 2em;background-color: #efefef;border-width: .3em .2em .5em;border-style: solid;border-color: #000;border-radius: .15em;}
.css-icon-phone:after {content: "";position: absolute;right: 0;bottom: -.4em;left: 0;margin: auto;width: .5em;height: .3em;background-color: #fff;border-radius: .3em;}
.css-icon-search {box-sizing: border-box;position: relative;width: 1em;height: .3em;background-color: #000;border-top-right-radius: .15em;border-bottom-right-radius: .15em;transform: rotate(40deg);transform-origin: right center;}
.css-icon-search:before {content: "";position: absolute;left: -1.3em;bottom: -.6em;width: 1em;height: 1em;border: .3em solid #000;border-radius: 50%;}
.css-icon-star {box-sizing: border-box;position: relative;width: 0;height: 0;border-top: .7em solid #000;border-right: 1em solid transparent;border-left: 1em solid transparent;}
.css-icon-star:before {content: "";position: absolute;top: -.7em;left: -1em;width: 0;height: 0;border-top: .7em solid #000;border-right: 1em solid transparent;border-left: 1em solid transparent;transform: rotate(72deg);}
.css-icon-star:after {content: "";position: absolute;top: -.7em;left: -1em;width: 0;height: 0;border-top: .7em solid #000;border-right: 1em solid transparent;border-left: 1em solid transparent;transform: rotate(-72deg);}
.css-icon-email {box-sizing: border-box;position: relative;width: 0;height: 0;border-width: .7em 1em;border-style: solid;border-color: transparent transparent #000 #000;}
.css-icon-email:before {content: "";position: absolute;top: -.7em;left: 1em;transform: rotateY(180deg);transform-origin: left center;width: 0;height: 0;border-width: .7em 1em;border-style: solid;border-color: transparent transparent #000 #000;}
.css-icon-email:after {content: "";position: absolute;top: -.7em;left: 50%;margin-left: -.9em;width: 0;height: 0;border-top: .6em solid #000;border-right: .9em solid transparent;border-left: .9em solid transparent;}
.css-icon-eye {box-sizing: border-box;position: relative;width: 2em;height: 1.2em;background-color: #000;border-radius: 50%;}
.css-icon-eye:before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: .8em;height: .8em;background-color: #fff;border-radius: 50%;}
.css-icon-eye:after {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: .4em;height: .4em;background-color: #000;border-radius: 50%;}
.css-icon-unlock {box-sizing: border-box;position: relative;width: 1.6em;height: 1.4em;background-color: #000;border-radius: .2em;}
.css-icon-unlock:before {box-sizing: border-box;content: "";position: absolute;top: -.4em;right: -.4em;width: 1em;height: .6em;border-width: .2em;border-style: solid solid none;border-color: #000;border-radius: .5em;}
.css-icon-unlock:after {box-sizing: border-box;content: "";position: absolute;bottom: .2em;left: 50%;margin-left: -.15em;width: .3em;height: .5em;border-top-left-radius: .25em;border-top-right-radius: .25em;background-color: #fff;}
.css-icon-cup {box-sizing: border-box;position: relative;width: 1.3em;height: 2em;border-width: .2em .2em 1.2em;border-style: solid;border-color: #000;background-color: #efefef;border-bottom-left-radius: .3em;border-bottom-right-radius: .3em;}
.css-icon-cup:before {box-sizing: border-box;content: "";position: absolute;top: .1em;left: -.7em;width: .7em;height: 1.4em;border-width: .2em;border-style: solid;border-color: #000;border-top-left-radius: .3em;border-bottom-left-radius: .3em;}
.css-icon-heart {position: relative;width: 1.4em;height: 2em;background-color: #000;border-top-left-radius: 1em;border-top-right-radius: 1em;transform: rotate(-45deg);transform-origin: center bottom;}
.css-icon-heart:after {content: "";position: absolute;top: -.7em;left: -.7em;width: 1.4em;height: 2em;background-color: #000;border-top-left-radius: 1em;border-top-right-radius: 1em;transform: rotate(90deg);transform-origin: center bottom;}
.css-icon-home {box-sizing: border-box;position: relative;width: 1.4em;height: 1em;background-color: #000;}
.css-icon-home:before {content: "";position: absolute;top: -.7em;left: 50%;margin-left: -1em;border-left: 1em solid transparent;border-right: 1em solid transparent;border-bottom: .8em solid #000;}
.css-icon-home:after {z-index: 2;content: "";position: absolute;right: 0;bottom: 0;left: 0;margin: auto;width: .3em;height: .5em;background-color: #fff;}
.css-icon-password {box-sizing: border-box;position: relative;width: 1.8em;height: 1.4em;background-color: #000;border-radius: .2em;}
.css-icon-password:before {box-sizing: border-box;content: "";position: absolute;top: -.6em;left: 50%;margin-left: -.5em;width: 1em;height: 1em;border: .2em solid #000;border-radius: 50%;}
.css-icon-password:after {box-sizing: border-box;content: "";position: absolute;bottom: .2em;left: 50%;margin-left: -.15em;width: .3em;height: .5em;border-top-left-radius: .25em;border-top-right-radius: .25em;background-color: #fff;}
.css-icon-user {box-sizing: border-box;position: relative;width: .9em;height: .9em;background-color: #000;border-radius: 50%;}
.css-icon-user:after {content: "";position: absolute;top: 1em;left: 50%;margin-left: -.9em;width: 1.8em;height: 1em;background-color: #000;border-top-left-radius: .9em;border-top-right-radius: .9em;}
.css-icon-menu3 {color: #000;display: block;width: 50px;height: 50px;box-sizing: border-box;border-top: 10px solid;/*没有设置颜色值，将同文本颜色一样*/border-bottom: 10px solid;padding-top: 10px;padding-bottom: 10px;background-color: currentColor;/*颜色关键字，将同文本颜色一致*/background-clip: content-box;/*背景将绘制在内容方框内*/}
