0

カスタム アイコンのフォントフェイスが Web サイトに表示されません。ブラウザの設定から Unicode の範囲に至るまで、これのもっともらしい原因を探すのにかなりの時間を費やしました。基本的に、私はここからチュートリアルに従いました: http://tympanus.net/Blueprints/ResponsiveIconGrid/

私はそれを自分のウェブサイトにうまく実装しました。機能性、スタイル、すべてがチェックされています。アイコンの代わりに長方形/正方形が表示されることを除いて、控えめに言ってもイライラします.

まったく同じブラウザを使用して両方の Web サイトを表示していますが、codrops のアイコンは問題なく表示されます。皆さん、何が問題なのかヒントはありますか?

CSS にフォントを追加しました。ここにあります:

@font-face {
    font-family: 'anyoldicon';
    src:url('assets/anyoldicon.eot');
    src:url('assets/anyoldicon.eot?#iefix') format('embedded-opentype'),
        url('assets/anyoldicon.woff') format('woff'),
        url('assets/anyoldicon.ttf') format('truetype'),
        url('assets/anyoldicon.svg#anyoldicon') format('svg');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+00-FFFF;
}

そして、ここに私のHTMLがあります:

<li>
  <a href="#">
    <span class="cbp-ig-icon cbp-ig-icon-whippy"></span>
    <h3 class="cbp-ig-title">George</h3>
    <span class="cbp-ig-category">Smith</span>
  </a>
</li>

他に見逃したものはありますか?正直なところ、URL は表示したくありません。説明どおり - 同じレイアウトですが、一方の Web サイトでは表示され、もう一方の Web サイトでは壊れています。

アイコンとグリッドのアニメーションに対応する CSS は のとおりです。

最後に、Muse を使用して Web サイトをコンパイルしています。ただし、それがどのように悪影響を与えるかはわかりません。どういうわけか Muse がフォントをいじっているのでしょうか?

4

1 に答える 1