如何仅在 CSS 中构建此图标？答案

【问题标题】：How to build this icon in CSS only?如何仅在 CSS 中构建此图标？
【发布时间】：2015-09-28 09:27:12
【问题描述】：

我喜欢仅使用 CSS 构建 this icon（使用 Fontawesome）。 CSS的最佳实践是什么？谢谢！

【问题讨论】：

感谢编辑！
没问题。但是，我认为这对 SO 来说不是一个好问题。如果您尝试自己解决此问题，以及出了什么问题，那将是更合适的选择。 ;)
好的，我会记住的。 :) 这是我第一次在 SO 上发帖，也许有点自发。
您可能想看看tour 只是为了了解如何提问/回答，以及“要问什么”；)
我真的很想对此表示赞同，但没有任何代码或 OP 的尝试我无法做到这一点:(

标签： css user-interface icons font-awesome css-shapes

【解决方案1】：

到目前为止，这是一个粗略的设计，但向您展示了如何单独使用 css 来实现。

我还通过使用vw 单位和% 单位将其设计为可扩展的方式。

.circle {
  height: 20vw;
  width: 20vw;
  background: green;
  border: 10px solid lightgreen;
  border-radius: 50%;
  position: relative;
}
.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40%;
  width: 40%;
  box-sizing: border-box;
  border: 0.5vw solid white;
  border-radius: 5px;
}
.square:before,
.square:after {
  content: "";
  position: absolute;
  background: white;
}
.square:before {
  height: 20%;
  width: 40%;
  top: 50%;
  left: 20%;
  border-radius: 5px 0 5px 5px;
  transform: rotate(45deg);
  z-index: 10;
}
.square:after {
  height: 100%;
  width: 20%;
  top: -8%;
  left: 70%;
  border-radius: 10px 10px 10px 0;
  transform: rotate(45deg);
  border: 5px solid green;
  border-bottom: none;
}

<div class="circle">
  <div class="square"></div>
</div>

【讨论】：

【解决方案2】：

SVG

我只需要向您展示使用 svg 可以轻松做到这一点。
我发现 svg 是创建高级形状的最佳工具。

<svg wdth="250px" height="250px" viewBox="0 0 100 150">
  <rect x="0" y="0" width="100" height="150" fill="rgb(247,242,234)"></rect>
  <circle cx="50" cy="50" r="50" fill="rgba(125,189,84, 0.3)"></circle>
  <circle cx="50" cy="50" r="40" fill="rgb(125,189,84)"></circle>
  <rect x="30" y="30" rx="5" ry="5" width="40" height="40" stroke-width="5" stroke="white" fill="none"></rect>
  <polyline stroke="rgb(125,189,84)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <polyline stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <text x="50" y="120" text-anchor="middle" style="font-family: fantasy;">Work Orders</text>
</svg>

【讨论】：

嗯，也许我在文字和背景方面做得过火了：/
看起来不错。谢谢！不幸的是，由于旧设备支持，我无法使用 SVG。
你的IE8！（笑话），没关系，只是对查看此问题的其他人的建议，因为您在问题中指定了如此重的 css。

【解决方案3】：

检查这个 sn-p..

.box {
  width: 50px;
  height: 50px;
  background-color: #7DBD54;
  border-radius: 50%;
  border: 4px solid #BDDEAA;
  position: relative;
  text-align: center;
}
.box i {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 18px;
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="box">
  <i class="fa fa fa-check-square-o"></i>
</div>

【讨论】：

【解决方案4】：

最简单的方法是：

工作示例：Jsfiddle

CSS

.circle{
            background:#7dbd54;
            height:150px;
            width:150px;
            border-radius:50%;
            margin:20px auto;
            border:8px solid #B6E896;
            text-align:center;
        }
        .circle .fa-check-square-o{padding-top:30px;color:#fff;}

HTML

 <div class="circle">
    <i class="fa fa-check-square-o fa-5x"></i>
   </div>

【讨论】：

【解决方案5】：

我意识到颜色不是正确的绿色，但是，我会这样做。

HTML：

<div>
    <i class="fa fa-check-square-o"></i>
</div>

CSS：

div {
    background:green;
    border-radius:100%;
    border:4px solid limegreen;
    color:white;
}

【讨论】：