ブートストラップグリフィンの周りにリングを追加する方法

Question

黒丸を使用せずに、ブートストラップグリフの周りにリングを追加するにはどうすればよいですか？私はあなたが円グリフの上にグリフを座っているだけの例を見ましたが、次に、下に示すように正しい背景色を得られません。

Answer 1

ここでは、モジュラの背景/色/境界線のオプションを使用して別の（円）div内にアイコンを表示して配置する方法の例を示します。

「スニペット」を参照してください。

/**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

私はborder-radiusを使用したい、あなたはおそらくheightとwidth値を微調整する必要があります。

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