在Bootstrap中，将徽章添加到导航栏图像的正确方法是什么？

Question

我有一个相当基本的Bootstrap 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>