在Bootstrap中，將徽章添加到導航欄圖像的正確方法是什麼？

Question

我有一個相當基本的Bootstrap導航欄，並在文本上填充了圖像鏈接。但是，我想還包括一個徽章 - 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>