3

我想在项目符号列表中使用 fontawesome 图标。该指南提供以下标记：

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

简单的。诶？但是，我想使用一个很棒的字体堆栈，而不是普通的旧图标。常见问题：

<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>

问题是；我怎样才能将两者结合起来？坚持icon-li堆栈跨度类不起作用。

4

3 回答 3

1

在较新版本的 font awesome (4.0.3) 上，您可以使用 bootstrap 的 list-unstyled 类来获得相同的效果。

<ul class="list-unstyled">
  <li>
    <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-file-text fa-stack-1x fa-inverse"></i>
    </span>
  </li>
</ul>
于 2014-04-29T14:23:35.297 回答
1

这是你想要的？

  <ul class="icons-ul">

    <li>
      <span class="icon-stack icon-li">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-ok"></i>
      </span>
      Buttons
    </li>
    <li>
      <span class="icon-stack icon-li">
        <i class="icon-check-empty icon-stack-base"></i>
        <i class="icon-ok"></i>
      </span>
      …and many more with custom CSS
    </li>
  </ul>
于 2013-08-28T22:22:49.247 回答
0

我一直在努力解决同样的问题。我想使用堆叠图标作为li. 不仅如此，我一直在尝试将堆叠图标和普通图标组合在一起，ul这已被证明是一场噩梦。

我设法解决了这个问题。我正在建立一个新站点，busycreator.com，如果您访问，您将在页脚中看到第二列，其中包含社交媒体链接。Dribbble 图标实际上是一个堆栈（Dribbble 标志和实心圆圈）。这是我所做的：

<ul class="fa-ul" style="margin-left:21px;">
    <li style="margin-bottom:6px;">
        <i class="fa-li fa fa-pinterest-square fa-lg" style="color:#c40f2d;"></i>
            <a href="#" title="Pinterest">pinterest</a>
    </li>
<li class="fa-stack">
        <i class="fa-li fa fa-circle fa-lg" style="color:#e2418a;"></i>
        <i class="fa-li fa fa-dribbble fa-lg" style="color:#be0f64;"></i>
            <a style="position:relative; top:-3px;" href="#" title="Dribbble">dribbble#</a>
    </li>
</ul>

正如你所看到的，有相当多的内联样式，这是永远不会想到的。有一些使用边距/填充和相对定位的手动定位，但这是唯一有效的方法。我有一种感觉，许多外部样式表相互竞争，所以内联样式是我设法让它工作的唯一方法。

有一个副作用是链接名称——和之间的东西——<a>不能</a>包含空格。否则，每个单词都会分到自己的行，在列表中形成一个列表。

随意建立在这种愚蠢的基础上并让它正常工作。我会很感激的。

于 2014-01-19T18:58:31.860 回答