4

新しい FontAwesome 4.0.0 には、積み重ねられた項目の CSS スタイルがあります。 

<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  width: 100%;
  text-align: center;
 }
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

.fa-square-o:before {
  content: "\f096";
}

ここに画像の説明を入力

spanネストされたandを使用せずiに、いくつかの css-classesのみを使用してのみ実行したい

.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />

同じ結果を得る最も簡単な方法は何ですか (fa コンテンツ クラスを使用しますか?)

更新:または、次のようなことは可能ですか?

 .myclass1:before { content:     '<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>' }

     <span class=".... myclass1" />
4

2 に答える 2

4

（編集）

fa-*積み重ねられたアイコンの順序を決定する可能性がないため、これはクラスでは不可能です: CSSclass="foo bar"ではclass="bar foo"

反対に、独自のクラスを定義し、それをスタイルして、選択した 1 つのスタック アイコンを実現できます。つまり、ペアごとに 1 つのカスタム クラスが必要になります (例: fa-timesstack on fa-square)。

これを実現するには、:beforeと:afterセレクター (および絶対配置 -少しデモ) を使用します。

また、絶対配置を使用すると、要素が上にあるようです (backgroundプロパティを使用してテスト) 。そうでない場合は、これらの 2 つの要素を手動で並べ替えるために常に使用します。:after:beforez-index

于 2013-10-25T13:22:08.767 に答える
3

あなたのアップデートについて、次のようなことが可能ですか？

.myclass1:before { 
   content:'<span class="fa-stack">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i>
    </span>' 
}

<span class=".... myclass1" />

そこに説明されているように、そうではありません: CSS コンテンツ プロパティ: テキストの代わりに HTML を挿入することは可能ですか?

2 つの積み重ねられたアイコンを 1 つの HTML タグで制御したい場合は、そのようなもので取得できます。

div{
  display:flex;
  justify-content: center;
  position:relative;
}

i:before {
    content: attr(icon-before); // "\f099";
    position: absolute; 
    font-size: 1.5em;
    margin:0.1em;
}

i:after {
    content: attr(icon-after); // "\f096";
    position: absolute; 
    font-size: 2.1em;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<!--https://stackoverflow.com/questions/22600464/html-special-characters-in-css-content-using-attr-->

<div><i class="fa" icon-before="&#xf099" icon-after="&#xf096"></i></div>

于 2016-11-08T16:18:46.613 に答える