【实用随记】纯CSS画icon

给 ：after ：before 分别定义样式

避免产生过多的DIV

例如 download-ICON

html:

 <span class="icon">
            <span class="download"></span>
        </span>

css:

        .icon{
        display: block;
        float: left;
        font-size: 64px;
        height: 64px;
        line-height: 64px;
        margin-bottom: 32px;
        margin-left: 0px;
        margin-right: 48px;
        margin-top: 0px;
        position: relative;
        width: 64px;
        }

        .download{
        position: absolute;
        top: 0;
        height: 35px;
        width: 20px;
        background-color: rgb(102, 102, 102);
        }
        .download:before{
        content: "";
        width: 0;
        height: 0;
        border-width: 20px;
        position: absolute;
        top: 30px;
        left: -10px;
        border-style: solid;
        border-color: rgb(102, 102, 102) transparent transparent  transparent ;
        }
        .download:after{
        content: "";
        width:41px;
        height: 5px;
        border-width: 0 10px 10px 10px;
        position: absolute;
        border-style:solid;
        top: 50px;
        left: -20px;
    }