Center Font Awesome icons in circles

Question

I have list items with text and they have a plus icon in a circle after them done with the pseudo-element :before. How could I center all the plus icons?

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

Do you want the icons to be centered horizontally, vertically? Or what exactly are you trying to do? — thepio, Aug 29 '16 at 07:24

score 0 · Answer 1 · answered Aug 29 '16 at 07:33

Update 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;
    }

Live Demo Here

Center Font Awesome icons in circles

1 Answers1