Bootstrapでは、navbarイメージにバッジを追加する正しい方法は何ですか？

Question

私はかなり基本的で、テキストの上にイメージリンクが設定されたブートストラップNavbarを持っています。しかし、私はバッジを含めることを望みます - IE、メッセージの数を表示します。

問題は、バッジの位置です。それは右に置かれますが、イメージに対して右上にそれを正当化することを好むでしょう。また、リンク自体の幅と高さにも直接影響します。強制的にバッジの位置を設定することが、最終的に彼らはあまりにもうまく動作しませんでした -

<li> 
     <a href="#"> 
      <?= $this->Html->image('MessageIcon.png'); ?> 
      <span class="badge">42</span> 
     </a> 
    </li> 

は、私はかなり厄介であることが判明し、いくつかの解決策を試してみました。この場合、バッジの位置とリンクのデザインをどのように扱うかについての提案はありますか？

編集：明確にするために、これは私が達成しようとしているものです：

Answer 1

チェックアウトこのスニペット

.icon.container a>img { 
 
    width: 40px; 
 
} 
 

 
.icon.container { 
 
    display: inline-block; 
 
} 
 

 
.badge-notify{ 
 
    position: relative; 
 
    top: -10px; 
 
    left: -18px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<ul> 
 
    <li class="icon container"> 
 
    <a href="#"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png"> 
 
     <span class="badge badge-notify">3</span> 
 
    </a> 
 
    </li> 
 

 
    <li class="icon container"> 
 
    <a href="#"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png"> 
 
     <span class="badge badge-notify">3</span> 
 
    </a> 
 
    </li> 
 
<ul>