Css 对齐符号图标旁边的数字

我似乎无法使这个数字与字形图标对齐。我想把数字3再往上推一点，这样它就排成一行了

CSS

body {
        background-image: url("bg1.png");
}
.icons {
        margin: 0px 0px 0px 10px;
}
.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #ecf0f1;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
  padding: 10px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}
#alertbox {
        padding: 2px 2px 2px 2px;
        text-align: center;
}
#topicon {
        font-size: 50px;
}
#stats {
        font-size: 50px;
        display: inline-block;
        float: right;
}

HTML

 <div class="col-md-3">
      <div class="well well-lg">
           <div id="alertbox" class="alert alert-info">Total APIs</div>
           <span id="topicon" class="glyphicon glyphicon-tasks"></span>
           <span id="stats">3</span>
      </div>
 </div>

总空气污染指数
3.

屏幕截图

---

缩放时使用定位不起作用，因为在移动电话上数字3会进入中心。我想我需要它来自动缩放较小的浏览器。

如果您从

#stats

中删除浮动，您可以执行以下操作：

.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}

---

请在你的问题中发布你的代码。它可以工作，但是我在字形图标和数字3下有一个巨大的间隙。