フォントのような素晴らしいバッジをアイコンのように組み合わせる

Question

チュートリアルでは、アイコンを重ねて表示する方法を説明します。私が探しているのは、ブートストラップボタングループと同じフットプリントに収まるフォント/アイコンのフォントを減らすことです。ここで私が試したこととjsfiddleがあります。

注：ボタン1の試みでは大きすぎて、+とマイナス記号がトップでバッジのようなものであれば試みで、アイコンが小さすぎる

https://jsfiddle.net/6k1uexor/1/

<div class="group"> 
Attempt 1 
<div class="btn-group"> 
     <a href="" class="btn btn-default"> 
      <span class="fa-stack"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-minus" style="font-size: 0.6em;"></i> 
      </span> 
     </a> 
     <a href="" class="btn btn-default"> 
      <span class="fa-stack"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-plus" style="font-size: 0.6em;"></i> 
      </span> 
     </a> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-print"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-archive"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-cog"></i> 
     </a> 
    </div> 
</div> 
<div class="group"> 
Attempt 2 
<div class="btn-group"> 
     <a href="" class="btn btn-default"> 
      <span class="fa-stack fa-sm"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-minus" style="font-size: 0.6em;"></i> 
      </span> 
     </a> 
     <a href="" class="btn btn-default"> 
      <span class="fa-stack fa-sm"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-plus" style="font-size: 0.6em;"></i> 
      </span> 
     </a> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-print"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-archive"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-cog"></i> 
     </a> 
    </div> 
</div> 

ボーナスポイントです2右。

Answer 1

私はバッジになりたかったボタンとポジションの相対的なポジションを使用して終了しました。

https://jsfiddle.net/6k1uexor/2/

<div class="group"> 
Final Attempt 
<div class="btn-group"> 
     <a href="" class="btn btn-default btn-hasbadge"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-minus fa-badge"></i> 
     </a> 
     <a href="" class="btn btn-default btn-hasbadge"> 
       <i class="fa fa-font"></i> 
       <i class="fa fa-plus fa-badge"></i> 
     </a> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-print"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-archive"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-cog"></i> 
     </a> 
    </div> 
</div> 

CSS：

.btn.btn-hasbadge { 
    position:relative; 
    padding-left:8px; 
    padding-right:16px; 
} 

.fa-badge { 
    font-size: 0.6em; 
    position:absolute; 
    top:10px; 
} 

Answer 2

どのようにこのことについて、

<div class="btn-group"> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-font"></i> 
      <i class="fa fa-minus fa-sm"></i> 
     </a> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-font"></i> 
      <i class="fa fa-plus fa-sm"></i> 
     </a> 
     <a href="" class="btn btn-default"> 
      <i class="fa fa-print"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-archive"></i> 
     </a> 
     <a class="btn btn-default"> 
      <i class="fa fa-cog"></i> 
     </a> 
    </div> 
</div> 

とCSS、

.fa-sm{ 
    font-size: 0.6em; 
    vertical-align: middle; 
} 

https://jsfiddle.net/vxbfc1ye/1/

ありがとう！