圓圈中心字體真棒圖標

Question

我有帶有文本的列表項，使用偽元素：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> 

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

現場演示 在這里