web-dev-qa-db-fra.com

Matériau Design Icons n'apparaissant pas dans le navigateur

J'essaie d'héberger l'ensemble d'icônes Google Material Design pour mon site Web, mais je ne parviens pas à afficher les icônes dans Chrome ou Safari.

J'utilise ce fichier CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
  src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
       url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
       url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  Word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Tirer le fichier avec:

link(rel="stylesheet", href="/public/dist/css/font.css")

Que je peux voir dans le navigateur est chargé

La police elle-même est même chargée dans la page. Je peux voir le fichier .woff dans l'onglet Réseau de Chrome.

Il s’agit de la structure de dossiers public hébergée «en l’état» par le serveur.

 Public folder

J'utilise la police ici (jade): 

i.material-icons.prefix perm_identity

Et je peux voir la classe CSS ci-dessus appliquée à cet élément

Mais les polices ne rendent pas.

EDIT: Les gens ici ont le même problème: https://github.com/google/material-design-icons/issues/205

cssiconsmaterial-design
7
Rob

Cela était dû à la présence de polices d'icônes obsolètes sur le site Web materializecss.com. J'ai utilisé celles du dépôt Google GH et elles ont fonctionné soupir

4
Rob

Utilisez simplement les icônes de conception de matériaux Google directement sur votre page Web . Vous trouverez les détails ici https://google.github.io/material-design-icons/ J'ai pu résoudre ce problème. ce problème en utilisant la feuille de style de police Google Web. C’est beaucoup plus facile de cette façon .. vous pouvez simplement inclure les feuilles de style dans votre page Web et toutes les classes d’icônes de polices Web sont chargées et vous êtes prêt à partir.

1
Jayant Nayak