带有图标的css圈

由 发布于

我正在尝试实现如下图所示

我已经设法在其中创建带图标的css圆圈，但之后的文本与cirlce不符。

.circle {
  background: #938005;
  border-radius: 50%;
  color: black;
  display: inline-block;
  height: 50px;
  font-weight: bold;
  font-size: 1.2em;
  width: 50px;
  margin: 0 auto;
}

.circle span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  text-align: center;
  padding: 0 15px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box box-info">
  <div class="box-body">
    <div class="col-md-3"><span class="circle"><span><i class="fa fa-comments-o"></i></span></span> <b>Chat</b> Send Public and Private Messages</div>
  </div>
</div>