制作字体很棒的徽章，如图标组合

Question

在教程中，它向您展示了如何为一个位于另一个之上的图标制作 fa-stack。我正在寻找的是增加 font/decrease 字体图标，它适合与 bootstrap 按钮组相同的占用空间。这是我尝试过的 jsfiddle。

注意：在尝试 1 中按钮太大，在尝试 2 中图标太小

<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/

谢谢！

制作字体很棒的徽章，如图标组合

Making a font awesome badge like icon combination

font-awesome

twitter-bootstrap-3