字体神器：堆叠和固定宽度

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>

上面的例子没有产生一个固定宽度的图标。在span类中添加fa-fw并不能解决这个问题。有什么想法？

- Wes

---

你解决了这个问题吗？ - raphael

@raphael - 我在下面发布了一个答案。 - Wes

太棒了，谢谢！我编辑了你的答案并添加了一段代码片段。 - raphael

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>

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

为了使列表组中的其余图标具有相同的固定宽度，它们必须被堆叠在一个空图标后面。

- Wes

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。

- M'sieur Toph'

---

我不想接受这个答案，因为它需要内联样式。不过还是谢谢你的回答。 :) - Wes

@whargrove：看一下我的帖子结尾。我说你可以重写原始类来避免内联样式。 - M'sieur Toph'