8

アイコンフォントを使用して以来、配置やクリッピングの束ではなく、1 つのクラスで 2 つの色を使用することは大きな問題でした.私のように、答えを探したものの複雑な問題しか見つからなかった人のために、これを投稿してもよいと思いました...

4

1 に答える 1

7

さて、私はこれを段階的に行うつもりです：

イラストレーターパート

  1. イラストレーターで、アイコンを新しいドキュメントにコピーします。
  2. 次に、1色をカットします。
  3. 名前を付けて保存を押してSVGとして保存
  4. 次に、切り取ったものを貼り付け、もう一方を削除します。
  5. 別の SVG として保存します。

イコモーン

  1. 本当に素晴らしいサイトです。
  2. アプリを起動します。
  3. svg をインポートし、保存をダウンロードします。

そして、これは、マルチカラーのフォント アイコンに対する 1 つのクラスのソリューションに使用した CSS です。

CSS

.icon-earth{
        font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-earth:after {
    content: "\e006";
    color:#F33;
    font-size:6em;

}
.icon-earth:before {
    content: "\e007";
    color:#0C0;
    font-size:6em;
    letter-spacing:-1em;
}

HTML

<div class="icon-earth"></div>

自分のニーズに合わせて CSS を解釈するのは静かで簡単です。助けが必要な場合は、大声で言ってください。この手順も順を追って説明します...

そして最後に JSFIDDLE ですが、JsFiddleでカスタム アイコン フォントを取得することはできません...

ブラウザのサポートはIE8以上で、それ以外はすべてチェック済みです..

于 2013-07-12T14:40:12.413 に答える