Question

在教程中，它向您展示了如何为一个在另一个之上的图标制作fa-stack。我正在寻找的是增加字体/缩小字体图标，它与引导按钮组的占用空间相同。这是我尝试过的一个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

这个怎么样，

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

谢谢！

Answer 2

我最终在按钮上使用绝对位置，并在我想成为徽章的位置上相对位置。

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;
}

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

2 个答案: