web-dev-qa-db-ja.com

GoogleのJSが変換に失敗したときにマテリアルアイコンのテキストが表示されないようにするにはどうすればよいですか？

GoogleのJSがアイコンへの変換に失敗したときに、マテリアルアイコンのテキストが表示されないようにするにはどうすればよいですか？

アイコンはマークアップで次のように定義されています。

<span class="material-icons">icon_name</span>

例： https://archive.fo/CKqKG/scr.png （ボタンの上段を参照）。

マテリアルアイコンのドキュメント： https://material.io/icons/

これは、Googleがdivのテキストを無視する代わりに実際に読み取って保存するというGoogle検索の問題でもあります。

例： https://i.imgur.com/TixS06y.png

.PNG（Google提供）に切り替えるだけで解決できることを理解しています。ユーザーのシステムの（ネットワーク）負荷が小さくなる結果を何でもしたいと思います。

ありがとう！

javascriptcssiconsgoogle-material-icons
22
David

Typekitの webfont loader を使用している場合は、条件付きクラスを適用して、Webフォントのロード中またはロードに失敗した場合にアイコンを非表示にすることができます。例：

.wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none;
  }
}

もちろん、最良の結果を得るために、好みに応じて他のスタイリング手法を適用できます。 font-size: 0;、それはあなたのサイトとユースケースに依存します。

マテリアルアイコンをwebfontローダーで読み込むには、次のような設定を使用します：

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};
3
Adam Reis

私も同じ問題に直面しています。ただし、i.material-icons：beforeのような疑似セレクターを使用すると役立つと思います。詳細は this を参照してください。

----編集：実例

i.material-icons:before{display:none;}

1
Ali Jaffar

font-display: block;、このCSSをHTMLヘッドに追加するだけです。

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

詳細については font-display

1
Fareed Alnamrouti

修正ではなく、ブラウザで support preconnect を使用すると、フォントをできるだけ早くロードしてロードできます。遅い接続でテキストとアイコンが表示されるまでの時間を短縮するのに役立ちます。

<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
0
Neil

簡単な解決策：

class/css priorityを利用して、マテリアルアイコンのフォントとCSSがまだ読み込まれていないときにアイコンを「非表示」にします。

そのためには、display: noneというスタイルを持つクラスを作成し、それを入れてくださいbefore.material-icons ones。フォントが読み込まれると、.material-iconsクラスの表示プロパティがdisplay: noneのものをオーバーライドし、アイコンが表示されます。以上です。

例：

.display-none {
    display: none;
}

// Important: .display-none class has to go before .material-icons ones!!!
<i class="display-none material-icons">settings</i>

お役に立てれば！

0
Llorenç Pujol Ferriol

ホームページにdiv style = "position：absolute; top：-1000px"を作成し、次のようにクラスmaterial-iconまたは素晴らしいフォントですべての項目を入力します。

<div   style="position:absolute;top:-1000px" >      
<i class="icon material-icons-outlined"  >add_circle</i>
<i class="icon material-icons "  >list_alt</i>
<span class="fas fa-circle fa-stack-2x " ></span>
<span class="fas fa-home fa-stack-1x fa-inverse"  ></span>
</div>
0
Paulo R. Carvalho de Oliveira

私は同様の状況で苦労してきました：私の問題は、アイコンがロードされないことではなく、遅い接続でロードするのにしばらく時間がかかることですそして、醜く読み込まれるまで、フォーマットされていないsentiment_very_satisfiedのようなテキストがページに表示されます（多くの場合、周囲のテキストよりも数倍大きく、非常にわかりやすくなります）。

ここでの他のソリューションは私にとってはうまくいかなかったので（_font-display:block_を含むと私は期待できるかもしれないと考えました）、CSSとjQueryを使用して独自のソリューションを思いつきました。バニラJSを使用するように簡単に変更できると思います。

CSS：

_.material-icons{
    opacity:0;
}
_

jQuery：

_$(window).load(function() {
    $('.material-icons').css('opacity','1');
});
_

ここでのトリックは、より一般的に使用される$(document).ready()リスナーとは異なり、$(window).load()は、トリガーされる前にページのすべての要素がダウンロードされるのを待機することです。この場合、アイコンのフォントがダウンロードされるまで、アイコンの不透明度は変更されません。

欠点は、ページ上のeverythingがダウンロードされるまでアイコンが表示されないことですが、これは私が喜んでトレードオフでした。アイコンフォントが読み込まれる前に私のページに巨大なテキストのスパンが表示されるのを避けるため。

（CSS _.material-icons{transition:opacity 0.5s;}_への移行も追加したので、スムーズでスムーズに表示されました。）

0
todd

これに対する正しい解決策は、同じフォントサイズの最大幅を追加し、オーバーフローを非表示に設定することです。

.material-icons {
    max-width: 16px;
    overflow: hidden;
}
0
alabo briggs