2016-04-11 16 views
0

私はウェブを精練していますが、これに対する答えは見つかりません。 1つのiタグに2つのFont Awesomeアイコンを追加する予定はありますか?1つのタグに2つのフォント素晴らしいアイコンがあります

私はこのように、並んで2個のIタグ側を置けば、私はそれを行うことができます。

Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i> 

だから、これを行うにはとにかくがありますか?

+0

私が知っている限りではありませんが、あなたが別のものの上に横たえたいならば、あなたができることは何ですか(あなたの意図ならば)。 – Moritz

+0

もう一方には、2つの異なるアイコンが並んでいます。 1つのタグで。 –

+0

1つの 'i'タグを持ち、2つの' span'タグを持つのは大丈夫ですか? :) –

答えて

2

このようなGlyphベースのフォントは、一般的に、要素のcontentを特定の値に変更することで機能し、フォントはそれをピックアップして適切なグリフとしてレンダリングします。

ライブラリが特定の構文を提供していない限り(フォントAwesomeがstackingを使用するのと同じように)、単独のタグを使用して両方を表示することはできません。

+0

よろしくお願い致します。 2つのiタグを横に並べるだけで、2つのフォントのすばらしいアイコンを追加する効率的な方法はありますか? –

+0

IMO、2つのタグのアプローチは、おそらく最も簡単でクリーンなものになるでしょう。 –

+0

OK。どうもありがとう!私ができる時にあなたの答えを最高の答えとして選ぶでしょう。愚かなタイマー。 –

0

FontAwesomeの現在のライブラリでは不可能です。しかし、arkaschaが以下に示唆しているように回避策があります。



追加情報:また

ないまさにあなたがを求めている。しかし、私は、これはあなたを助けるだろうと思い、タイトルでこのスレッドに陥る将来群衆。

私はここで

https://stackoverflow.com/a/36491858/2592042

あなたはまた、スタッキングして、適切に整列させることにより設定されたフォント-awesomeがアイコンで利用可能なアイコンのセットを使用して、カスタムアイコンを構築することができます...と同様のものを答えていました。 Stacked Icons

例:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-male fa-stack-1x"></i> 
 
    <i class="fa fa-female fa-stack"></i> 
 
</span>

2

これは、理由は、クラスを識別するグリフが適用される方法方法あり、単一<i>タグでは不可能です。長いまたは動的配列について、あなたはしかし、直接マークアップ記法でアイコンコードを使用することができます。

  • HTML:<span class="font-awesome">&#xf183&#xf182</span>

  • CSS:.font-awesome { font-family: FontAwesome; }

これは明らかに、あなたがロードすることが必要ですフォントはFontAwesomeです。

私はシオマネキなどの簡単なデモを作成しました:私はこれはしかし、読みやや困難であるアプローチであることにかかわらず、同意しませんhttps://jsfiddle.net/6ofmn36g/

を...

+0

これはテストしましたか?これは動作しません –

+0

@Reddyそれを指摘してくれてありがとう!表記を修正し、デモとしてフィドラーを追加しました。 – arkascha

+0

ニース!!これはまったく同じ解決策だったでしょう。+1 –

関連する問題