任何人都可以帮助我通过CSS绘制这个图标吗？

Question

我不太了解如何通过CSS创建图标，但我只是想知道是否有一种方法可以使用它来绘制上面的图标。

Answer 1

是！

那就是说，有没有特别的理由不使用和图像，图标或glyph？

FIDDLE

HTML

<div></div>

CSS

div {
    border-radius:999px;
    height:100px;
    width:100px;
    background:#59ABD5;
    position:relative;
    display:inline-block;
}
div:before, div:after {
    position:absolute;
    display:inline-block;
    content:'';
    background:white;
    border-radius:5px;
}
div:after {
    left:45px;
    width:8px;
    height:45px;
    top:10px;
}
div:before {
    left:18px;
    width:40px;
    height:8px;
    top:60px;
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

Answer 2

Font awesome提供了大量可以使用的字体。

http://fortawesome.github.io/Font-Awesome/icons/