2

テンプレートに基づいて、クライアント向けのサイトを構築しています。テンプレートは、一部の画像にグリフィコンを利用するブートストラップフレームワークを使用します。ChromeでBootStrapホームページにアクセスすると、Glyphiconsは正常に機能しているようです。

これが私のために機能していないページです： http ：//www.laidoffsoftware.com/Contact.aspx

[アドレス]セクションの下にあるアイコンを見ると、電話番号の横に電話のアイコンが表示され、メールアドレスの横に封筒のアイコンが表示されているはずです。FF、IE、またはOperaでは、これは問題ないように見えます。ただし、Chromeではアイコンが壊れています。これらは奇妙な記号です。

なぜこれが起こっているのか私は途方に暮れていますか？

どんなアイデアでも大歓迎です。

更新：Chromeコンソールはこれを表示しています：

キー「width」のビューポート引数値「100％」が数値プレフィックスに切り捨てられました。

Contact.aspx：8リソースはフォントとして解釈されますが、MIMEタイプfont / x-woffで転送されます：" http://www.laidoffsoftware.com/font/fontawesome-webfont.woff "。

Contact.aspx：290リソースはフォントとして解釈されますが、MIMEタイプimage / svg + xmlで転送されます：" http://www.laidoffsoftware.com/font/IcoMoon.svg "。

@font-face {
    font-family: 'IcoMoon';
    src: url('../font/IcoMoon.eot');
    src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
    url('../font/IcoMoon.svg#IcoMoon') format('svg'),
    url('../font/IcoMoon.woff') format('woff'),
    url('../font/IcoMoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
    content: attr(data-icon);
    speak: none; }

/* Use the following CSS code if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before {font-family: 'FontAwesome', 'IcoMoon';
    font-style: normal;
    speak: none; } .icon-home:before {content: "\0021";} .icon-home-2:before {content: "\0022";} .icon-home-3:before {content: "\0023";} .icon-newspaper:before {content: "\0024";}
4

4 に答える 4

1

答えはわかったと思いますが、なぜこれが機能するのかは 100% わかりません。上記の CSS コードを参照してください。この変更を行いました...

url('../font/IcoMoon.svg#IcoMoon') format('opentype'),
于 2013-02-06T23:02:25.760 に答える
1

拡張パスに相対的なフォント URL を設定する必要があります。したがって、これを変更する必要があります

@font-face {
font-family: 'IcoMoon';
src: url('../font/IcoMoon.eot');
src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../font/IcoMoon.svg#IcoMoon') format('svg'),
url('../font/IcoMoon.woff') format('woff'),
url('../font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }

に

@font-face {
font-family: 'IcoMoon';
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot');
src: url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.svg#IcoMoon') format('svg'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.woff') format('woff'),
url('chrome-extension://__MSG_@@extension_id__/font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before {font-family: 'IcoMoon';
content: attr(data-icon);
speak: none; }chrome-extension://__MSG_@@extension_id__/

次のようなマニフェストファイルにcssを含めます： "css": ["/css/mystyle.css"]

于 2015-11-19T22:21:02.277 に答える
1

これは WebKit のバグのようで、こちらで報告されています: https://bugs.webkit.org/show_bug.cgi?id=76152

また、GlyphIcons の作成者は、この問題を認識しており、次のリリースで別の Unicode 値を使用してこのバグを回避しようとしていると述べています: https://twitter.com/glyphicons/status/423426740128854016

于 2014-01-21T17:07:30.900 に答える
0

コンソールを見てください。すべてのページでエラーが発生しています: Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

最初にそれを修正してから、これで問題が解決するかどうかを確認し、そうでない場合はディッパーを掘ります

アップデート

私がチェックしたもう 1 つのこと: Twitter Bootstrap はクラス icon-phone でデフォルトのグリフを提供しません: http://twitter.github.com/bootstrap/base-css.html#icons

自分で作成した、または他のソースから取得したカスタム アイコンを使用できますが、それには css を記述する必要があります。

于 2013-02-06T05:28:36.677 に答える