リンク内でアイコン スタックを使用しようとしています。アイコンを 1 つだけ使用すると、すべてが正常に機能します。しかし、スタック アイコンを使用しようとすると、単一のアイコンのようにリンクに表示されません。
私が使用している最初の方法は次のとおりです。
<a href="#" class="tweet"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis</a>
表示:壊れた積み上げアイコン
これにより、2 つのアイコンが両方とも左揃え (中央からずれている) になり、アイコンがテキストの上に表示されるようになります。
single の代わりに icon-stack クラスを使用してスパンを含めることが<i>できると考えていましたが、そうではありません。これはうまくいきます：
<a href="#" class="tweet"><i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis</a>
表示:インライン アイコン
container をどこに置く<span>べきか、またはさらにスタイルを追加する必要があるかどうかがわかりません。いろいろな組み合わせを試しました。を display:block に設定しaても役に立ちません (リンクに適用される他のスタイルはありません)。
リンクにテキストがない場合、結果は同じです。.icon-stackコンテナ クラスを に設定するとdisplay:block機能しますが、ベース アイコンが上部のアイコンよりもはるかに大きいため、完全ではありません。
これは可能なことですか？それとも、積み重ねたアイコンの使用方法の限界を押し上げていますか?