4

私はフォントの素晴らしいアイコンを使用していましたが、うまく機能していました。さらにアイコンが必要になったとき、開いている Web アイコンをダウンロードしました。これで、openweb アイコンをプロジェクトとそれに関連する css にもコピーしました。

フォントの素晴らしいcssには、このようなルールがあります..

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}

OpenWeb アイコン css には、このようなルールがあります。

    [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'OpenWeb Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    vertical-align: center;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased
}

これで、アイコン クラスは「icon-」で始まります

例<i class="icon-geo"></i>

現在、「icon-」は、両方のアイコンがそれに基づいた独自のルールを作成しているため、競合しています..バグジラで確認できます..そのフォントファミリーの1つにコメントすると、他のフォントが機能します..

どうすればこの問題を克服できますか..

4

1 に答える 1

3

クラスの前後に別の識別子を付けるだけで簡単にできます。

[class^="iconOW-"]:before, [class*=" iconOW-"]:before {
             ^^                          ^^
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}

その後、必要に応じて別のクラスからそれらを含めることができます。

検討したい Web フォント統合サービスは多数あります。fontello.comはその 1 つであり、さまざまなアイコン フォントを組み合わせることができます ( font-awesome に類似しており、font-awesomeを含みます) が、現在は含まれていません。使用している開いている Web アイコンのフォント。

それらにpingを実行すると、フォントセットが提供する価値を考えると、それが含まれている可能性があります!

于 2013-10-22T01:10:48.990 に答える