web-dev-qa-db-fra.com

Comment empêcher le texte des icônes matérielles de s'afficher lorsque les fichiers JS de Google ne parviennent pas à les convertir?

Comment empêcher le texte des icônes matérielles de s'afficher lorsque le JS de Google ne parvient pas à les convertir en icônes?

Les icônes sont définies dans le balisage en tant que telles:

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

Exemple: https://archive.fo/CKqKG/scr.png (voir la rangée de boutons supérieure).

Material Icons Documentation: https://material.io/icons/

C'est également un problème dans la recherche Google où Google lira et sauvegardera le texte de la div au lieu de l'ignorer.

Exemple: https://i.imgur.com/TixS06y.png

Je comprends qu'une solution consiste simplement à passer aux fichiers .PNG (fournis par Google). Je voudrais faire tout ce qui entraîne moins de charge (réseau) sur le système de l'utilisateur.

Merci!

javascriptcssiconsgoogle-material-icons
13
David

Si vous utilisez webfont loader de Typekit, vous pouvez appliquer des classes conditionnelles pour masquer les icônes pendant le chargement de la police Web ou en cas d'échec du chargement, par exemple:

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

Vous pouvez bien sûr appliquer d'autres techniques de style selon vos préférences pour obtenir les meilleurs résultats, par exemple. font-size: 0;, cela dépend de votre site et de votre cas d'utilisation.

Pour charger les icônes de matériaux avec le chargeur de webfont, utilisez la configuration de la manière suivante:

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

Je suis confronté au même problème. Je pense cependant que l’utilisation d’un pseudo-sélecteur tel que i.material-icons: before peut aider. Voir this pour plus d'informations.

---- EDIT: Exemple de travail

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

1
Ali Jaffar

vous pouvez utiliser font-display: block;, ajoutez simplement ce CSS à votre tête HTML:

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

pour plus d'informations font-display

1
Fareed Alnamrouti

J'ai eu des difficultés avec une situation similaire: mon problème n'était pas que les icônes never soient chargées, mais qu'elles pouvaient prendre un certain temps à se charger sur des connexions plus lentes et jusqu'à ce qu'elles chargent un texte laid et non formaté comme sentiment_very_satisfied serait affiché sur la page (souvent plusieurs fois plus grand que le texte environnant, ce qui le rend très évident).

Les autres solutions ici ne fonctionnaient pas pour moi (y compris font-display:block qui, à mon avis, pourrait être prometteur), alors je suis parvenu à mon propre projet en utilisant CSS et jQuery. Je suis sûr que vous pourriez facilement l'adapter pour utiliser Vanilla JS.

CSS:

.material-icons{
    opacity:0;
}

jQuery:

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

L'astuce ici est que, contrairement au programme d'écoute $(document).ready() le plus couramment utilisé, $(window).load() attend que tous les éléments d'une page soient téléchargés avant d'être déclenchés. Dans ce cas, cela signifie que l'opacité des icônes ne sera pas modifiée tant que la police n'aura pas été téléchargée.

L'inconvénient est que les icônes n'apparaîtront pas avant que tout sur la page ait été téléchargé, mais c'était un compromis que j'étais disposé à faire pour éviter d'avoir de grandes étendues de texte visibles sur ma page avant. la police de l'icône chargée.

(J'ai également ajouté une transition au CSS .material-icons{transition:opacity 0.5s;} afin qu'ils se présentent bien et sans problème.)

0
todd