Question

如何堆叠图标并对两个图标（或堆栈本身）应用固定宽度？

<div class="col-md-4">
  <p>
    <span class="fa-stack text-danger">
      <i class="fa fa-fw fa-stack-2x fa-stop"></i>
      <i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
    </span> Some text
  </p>
</div>

以上示例不会产生固定宽度图标。将fa-fw添加到span类不能解决问题。想法？

Answer 1

似乎较新版本的Font Awesome修复了这个问题。我正在使用下面的v4.4。

<div class="col-md-4">
    <div class="list-group">
        <a class="list-group-item" href="#">
            <span class="fa-stack text-danger">
                <i class="fa fa-fw fa-stack-2x fa-stop"></i>
                <i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
            </span>&nbsp; Some text
        </a>
        <a class="list-group-item" href="#">
            <span class="fa-stack">
                <i class="fa fa-fw fa-stack-2x"></i>
                <i class="fa fa-fw fa-stack-1x fa-anchor"></i>
            </span>&nbsp; Anchor
        </a>
    </div>
</div>

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
  <div class="list-group">
    <a class="list-group-item" href="#">
      <span class="fa-stack text-danger">
                    <i class="fa fa-fw fa-stack-2x fa-stop"></i>
                    <i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
                </span>&nbsp; Some text
    </a>
    <br>
    <a class="list-group-item" href="#">
      <span class="fa-stack">
                    <i class="fa fa-fw fa-stack-2x"></i>
                    <i class="fa fa-fw fa-stack-1x fa-anchor"></i>
                </span>&nbsp; Anchor
    </a>
  </div>
</div>

＆＃13;

为了使列表组中的其余图标以相同的固定宽度显示，它们必须堆叠在空图标后面。

Answer 2

我没有测试它，但是如果你尝试的话会怎样：

<div class="col-md-4">
  <p>
    <span class="fa-stack text-danger">
      <i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
      <i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
    </span> Some text
  </p>
</div>

...并调整值以适合尝试的宽度。

如果有效，您可以直接在CSS样式表中覆盖原始样式.fa-stop，.fa-exclamation ....也许你将不得不使用!important hack。

字体真棒：堆叠和固定宽度

2 个答案: