[RÉGLÉ] Police awesome (font-face) n'est pas pris en compte sous Chrome et Opera

[messinmaisoui]

Salut à tous/toutes
Je travaille sur un site réalisé à partir d'un template acheté,
J'ai un affichage Facebook (un F quoi)

<a class="fa fa-facebook" href="https://www.facebook.com/XXXX" target="_blank" title="Facebook"></a>

qui s'affiche grâce à ces classes fa et fa-facebook

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  /*text-rendering: auto;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

L'encodage est utf-8

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Sous Firefox, Safari, IE tout est OK, sous Chrome et Opera mon "F" n'apparait pas !
L'hébergeur est 1 & 1 en mutualisé

Avez-vous une idée de ce qui se passe, si besoin est ... je donnerai l'adresse du site + éléments
de connexion car il est encore hors-ligne et à finaliser ...
J'ai jeté un coup d'oeil un peu partout sur le net et je ne vois VRAIMENT pas d'où le problème
peut venir !?

Laurent

[messinmaisoui]

Re : Police awesome (font-face) n'est pas pris en compte sous Chrome et Opera

En haut rendu sous Firefox, Safari, IE
En bas rendu sous Chrome et Opera


Note : si je vais sous Chrome, je fais inspecter l'élément,

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

je retape le content donc \f09a, là miracle
le F apparait ... j'ai vidé le cache Joomla , vidé l'historique Chrome, changé d'ordinateur, mais
le problème demeure

[messinmaisoui]

Re : Police awesome (font-face) n'est pas pris en compte sous Chrome et Opera

Alors j'ai trouvé le problème ...
Dans mon template.css, j'ai placé du code qui a provoqué cet effet de bord
Ceci

li:first-letter{text-transform : capitalize;

L'idée de jeter un coup d'oeil à cet endroit m'est venue en retournant sur le template acheté et
en le testant sous Chrome et Opera comme tout était OK j'en ai déduit que
le problème ne venait pas du template, de font-face ou awesome et j'ai viré temporairement
tous mes ajouts dans template.css ce qui m'a confirmé qu'une règle css foutait le bazard ...