中心字体圆圈中的真棒图标

Question

我有带有文本的列表项，并且在使用伪元素完成后，它们在圆圈中有一个加号图标：之前。我怎么能把所有加号图标集中在一起？

.advantages .item-list-section .item {
	position: relative;
	margin-bottom: 15px;
}

.advantages .item-list-section .item .inner {
	position: relative;
	display: inline-block;
}

.advantages .item-list-section .item .inner:after {
	position: absolute;
	font-family: 'FontAwesome';
	content: "\f067";

	color: #ef6611;
	width: 14px;
	height: 14px;
	border: 1px solid;
	border-radius: 30px;

	top: 5px;
	right: -30px;

	font-size: 8px;
	line-height: 14px;
	text-align: center;
    display:block;
}

.advantages .item-list-section .item .inner.bottom-icon:after {
	top: 100%;
    margin-top: -18px;
}

.advantages .item-list-section .item.active .inner:after {
	background: #f13a01;
	color: #ffffff;
	content: "\f068";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="advantages primary">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-sm-offset-1 item-list-section">
        <div class="item-list">
          <div class="item">
                    <div class="inner">
                      <p>Продолжительный<br/>
                      срок службы</p>
                    </div>
                  </div>
                  <div class="item">
                    <div class="inner">
                      <p>Компактные<br/>
                      размеры</p>
                    </div>
                  </div>
                  <div class="item active">
                    <div class="inner">
                      <p>Насос с сухим ротором</p>
                    </div>
                  </div>
                  <div class="item">
                    <div class="inner">
                      <p>Котел способен стабильно<br/>работать даже при самом<br/>низком давлении</p>
                    </div>
                  </div>
                  <div class="item">
                    <div class="inner">
                      <p>Встроенная защита от<br/>
                      перепадов напряжения</p>
                    </div>
                  </div>
                  <div class="item">
                    <div class="inner">
                      <p>Надежная система<br/>
                      безопасности</p>
                    </div>
                  </div>
                  <div class="item">
                    <div class="inner">
                      <p>Наличие аварийных<br/>
                      режимов работы</p>
                    </div>
                  </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

更新Css

.advantages .item-list-section .item .inner:after {
        position: absolute;
        font-family: 'FontAwesome';
        content: "\f067";
        color: #ef6611;
        width: 14px;
        height: 14px;
        border: 1px solid;
        border-radius: 30px;
        top: 5px;
        right: -30px;
        font-size: 8px;
        line-height: 16px;
        text-align: center;
        display:block;
    }

现场演示 Here