ナビゲーションアイテムの横にグリフアイコンを配置

Question

私は以下のようにチェックを入れたnav stackedリストを持っています。小切手を項目の右または左に移動する方法はありますか？その項目が有効な場合、小切手を隠さないでください。

はここでアンカーの外に移動し、私のfiddle

<ul class="nav nav-pills"> 
 
    <li role="presentation" class="active"><a href="#">Home <i class="glyphicon glyphicon-ok pull-right"></i></a> 
 
    </li> 
 
    <li role="presentation"><a href="#">Profile <i class="glyphicon glyphicon-ok pull-right"></i></a> 
 
    </li> 
 
    <li role="presentation"><a href="#">Messages <i class="glyphicon glyphicon-ok pull-right"></i></a> 
 
    </li> 
 
</ul>

Answer 1

変更マークアップビットです。

<ul class="nav nav-pills nav-stacked"> 
    <li role="presentation" class="active"> 
    <a href="#">Home</a> 
    <i class="glyphicon glyphicon-ok pull-right"></i> 
    </li> 
    <li role="presentation"> 
    <a href="#">Other</a> 
    <i class="glyphicon glyphicon-ok pull-right"></i> 
    </li> 
</ul> 

.nav .active { 
    overflow: hidden; 
} 
.nav .active a { 
    width: 80%; 
    float: left; 
} 
.nav i {display:none;} 
.nav .active i { 
    margin: 12px 14px 0 0; 
    display: block; 
} 

EDIT：Fiddle

Answer 2

それは、以下のCSSを追加することにより、アクティブなときあなたが代わりにチェックマークを白（または異なる色）の背景を追加することができます。

.nav-pills>li.active>a i { 
    color: green; 
    background: #fff; 
    padding: 0.25rem; 
    border-radius: 0.5rem; 
} 

https://jsfiddle.net/karolbrennan/uc5xfsso/