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>

シンプル。え？ただし、単純な古いアイコンの代わりに、Font Awesome スタックを使用したいと考えています。通信先:

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

質問は; どうすれば2つを組み合わせることができますか? スタック スパン クラスに固執icon-liしても機能しません。

4

3 に答える 3

1

font awesome (4.0.3) の新しいバージョンでは、bootstrap の list-unstyled class を使用して同じ効果を得ることができます。

<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 に答える
0

私は同じ問題に苦労してきました。積み上げアイコンを の箇条書きとして使用したいli。これ以上に、スタック アイコンと通常のアイコンを同じものに結合ulしようとしてきましたが、これは悪夢であることが証明されています。

私はなんとか問題を解決することができました。私は新しいサイト、busycreator.comを作成しています。アクセスすると、フッターの 2 番目の列にソーシャル メディアへのリンクが表示されます。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>含めることができないという 1 つの副作用があります。それ以外の場合、各単語は独自の行に分割され、リスト内のリストが形成されます。

このばかげたことを自由に構築して、適切に機能させてください。感謝します。

于 2014-01-19T18:58:31.860 に答える