製作像圖標組合一樣的字體真棒徽章

Question

在教程中，它向您展示瞭如何爲一個疊在一起的圖標製作fa-stack。我正在尋找的是增加字體/減少字體圖標，它們與引導按鈕組相同。這裏是我嘗試過的一個jsfiddle。

注：在嘗試1按鈕是太大，並且在嘗試2的圖標太小

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> 

獎勵積分，如果+號和減號就像在上面徽章對。

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/

謝謝！