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

【问题标题】：Center Font Awesome icons in circles圆圈中的中心字体真棒图标
【发布时间】：2017-01-03 15:31:45
【问题描述】：

我有带有文本的列表项，并且在使用伪元素 :before 完成之后，它们在圆圈中有一个加号图标。我怎样才能使所有加号图标居中？

.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>

【问题讨论】：

您希望图标水平居中还是垂直居中？或者你到底想做什么？

标签： html css font-awesome pseudo-element

【解决方案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

【讨论】：