4

Icomoon を使用してカスタム フォント アイコンを作成しています。次のような同じスパンにアイコンを配置する必要がある状況があります。

<span class="glyph2" aria-hidden="false" data-icon="&#xe000; &#xe001;"></span>

ただし、両方とも異なる色である必要があります。これを行うことはまったく可能ですか？

そして、ここにすべてのコードを含むJSFIDDLEがありますが、カスタムフォントがjsfiddleで動作するようには見えません。

どんな助けでも大歓迎です。

4

2 に答える 2

1

data-icon属性だけを使用してこれが可能であるとは思いません。

代わりにIcoMoonのicon-クラスを使用して、before一方にCSS疑似セレクターを使用し、もう一方にセレクターを使用することができますafter。

icon1:before {
    content: "A";
    color:red;
}

.icon2:after {
    color: blue;
    content: "B";
}

私はこれをフィドルで示しました。

于 2013-02-25T06:49:48.617 に答える
0

フィドルでそれを実証することはできませんでしたが、うまくいくようです。

IcoMoon は :before 疑似セレクターでスタイリングされます。css によると、最初の文字の疑似セレクターは生成されたコンテンツに対して機能する必要があり、:before データも含まれます。

だから、含めて

.glyph2:first-letter {background-color: blue; color:white}

この外観を最初のアイコンに与えることができるはずです (2 つのカスタム文字を持つ :before 疑似要素で生成されます)。

ローカルではうまくいきましたが、フィドルではうまくいきませんでした。

于 2013-02-25T17:45:14.467 に答える