Bootstrap glyphicons çevresine halka ekleme

Question

Düz bir daire kullanmadan, önyükleme gliflerinin çevresine nasıl bir halka eklersiniz? Daire glifinin üst kısmına bir glif yerleştirdiğiniz bir örnek gördüm, ancak aşağıda gösterildiği gibi doğru arka plan rengini alamıyorsunuz.

Answer 1

İşte görüntülemek ve modüler arka plan/renk/sınır seçenekleri ile başka (daire) div içindeki bir simgeye konumlandırmak için nasıl bir örnek.

Bkz. Çalışma Snippet.

/**CSS FOR THE RING**/ 
 

 
.glyphicon-ring { 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    border: 4px solid white; 
 
    color: white; 
 
    display: inline-table; 
 
    text-align: center; 
 
} 
 
/**CSS FOR ICON WITH NO BACKGROUND COLOR**/ 
 

 
.glyphicon-ring .glyphicon-bordered { 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
/**WITH AN ADDED BACKGROUND COLOR**/ 
 

 
.glyphicon-white { 
 
    background: white; 
 
    color: black; 
 
    border: 4px solid black; 
 
} 
 
.glyphicon-teal { 
 
    background: teal; 
 
    color: orange; 
 
} 
 
.glyphicon-red { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container-fluid text-center"> 
 
    <div class="row"> 
 
    <div class="col-sm-3"> 
 
     <div class="alert alert-success"> 
 
     <div class="glyphicon-ring"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span> 
 

 
     </div> 
 
     </div> 
 
     <h4>Transparent Defaults</h4> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="alert alert-warning"> 
 
     <div class="glyphicon-ring glyphicon-white"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span> 
 

 
     </div> 
 
     </div> 
 
     <h4>Background Color + Icon Color + Border Color</h4> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="alert alert-danger"> 
 
     <div class="glyphicon-ring glyphicon-red"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span> 
 

 
     </div> 
 
     </div> 
 
     <h4>Background Color + Default Icon Color</h4> 
 

 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="alert alert-info"> 
 
     <div class="glyphicon-ring glyphicon-teal"> <span class="glyphicon glyphicon-pencil glyphicon-bordered"></span> 
 

 
     </div> 
 
     </div> 
 
     <h4>Background Color + Icon Color</h4> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<hr>

Answer 2

Ben border-radius kullanmayı tercih ediyorum, muhtemelen height ve width değerlerini çimdik gerekir.

.glyph{ 
    height:2em; 
    width:2em; 
    border-radius:50%; 
    border:3px solid #fff; 
}