CSS描绘图标

html代码

<div class="icon"></div>

点

.icon:after {
content: " ";
border:1px solid white;
display: inline-block;
}

竖线

.icon:after {
content: " ";
border: 1px solid white;
}

横线/减号

.icon:after {
content: " ";
border-top: 1px solid white;
padding: 8px;
}

加号/十字

.icon:before {
left: 7px;
top: 3px;
position: absolute;
height: 16px;
content: " ";
border-left: 2px solid #333;
}
.icon:after {
left: 0;
top: 10px;
position: absolute;
width: 16px;
content: " ";
border-top: 2px solid #333;
}

向上箭头

.icon:after {
content: "";
border: solid white;
border-width: 2px 0 0 2px;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

向下箭头

.icon:after {
content: "";
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

向左箭头

.icon:after {
content: "";
border: solid white;
border-width: 2px 0 0 2px;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

向右箭头

.icon:after {
content: "";
border: solid white;
border-width: 2px 2px 0 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

放大镜

.icon {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: crimson;
    border-radius: 50%;
    transition: all 1s;
    z-index: 4;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
.icon::before {
    content: "";
    position: absolute;
    margin: auto;
    top: 22px;
    right: 0;
    bottom: 0;
    left: 22px;
    width: 12px;
    height: 2px;
    background: white;
    transform: rotate(45deg);
    transition: all .5s;
}
.icon::after {
    content: "";
    position: absolute;
    margin: auto;
    top: -5px;
    right: 0;
    bottom: 0;
    left: -5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid white;
    transition: all .5s;
}