[Résolu] Mes media suppriment mes icons font face (ie10)

Question

ivan750

1 Mar 2019 à 21:49

bonjour, j'ai mis des icon sur mon site



      @font-face
	  {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?qz88sw');
	  src:  url('fonts/icomoon.eot?qz88sw#iefix') format('embedded-opentype'),
	        url('fonts/icomoon.ttf?qz88sw') format('truetype'),
			url('fonts/icomoon.woff?qz88sw') format('woff'),
			url('fonts/icomoon.svg?qz88sw#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
	  }
	  
	  [class^="icon-"], [class*=" icon-"]
	  {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: none;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  }


	  .icon-onglet-portail::before
	  {
	  content: "\e904";
	  }
	  
	  .icon-onglet-connexion:before
	  {
	  content: "\e971";
	  }
etc....

là , il m'affiche bien mais icon sur les 3 navigateurs, ie10, firefox, et google chrome

des que je mets ma média

@media (min-width: 75em)
	  {

@font-face
	  {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?qz88sw');
	  src:  url('fonts/icomoon.eot?qz88sw#iefix') format('embedded-opentype'),
	        url('fonts/icomoon.ttf?qz88sw') format('truetype'),
			url('fonts/icomoon.woff?qz88sw') format('woff'),
			url('fonts/icomoon.svg?qz88sw#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
	  }
	  
	  [class^="icon-"], [class*=" icon-"]
	  {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: none;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  }


	  .icon-onglet-portail::before
	  {
	  content: "\e904";
	  }
	  
	  .icon-onglet-connexion:before
	  {
	  content: "\e971";
	  }
etc....


	  }

sur le navigateur ie10 , les icon ne veut pas affiché.

à votre avis pour quoi la média supprime mes icons ?

aliasdmc

2 Mar 2019 à 10:01

Bonjour ivan750,
Essaye de faire un :

@media (min-width: 75em){
body{border:100px solid red!important;}
}

si sous ie tu le vois c'est que on passe bien dans la query , sinon c'est que tu ne passe pas dedans

ivan750

2 Mar 2019 à 11:32

je vois le rouge

mais pas les icons Smiley cligne

ivan750

3 Mar 2019 à 19:11

avez-vous une autre idée pour les icons via une média

_laurent

Modérateur

3 Mar 2019 à 19:23

Salut,

La définition de @font-face ne marche pas dans une @media pour IE10-
Pourquoi cherches-tu a faire ça ? Selon ta réponse on pourra contourner.
Modifié par _laurent (03 Mar 2019 - 19:23)

_laurent

Modérateur

3 Mar 2019 à 19:24

Mais le plus simplement possible il te suffit de déclarer ta font en dehors :

@font-face {
  font-family: "some-font";
}

@media (min-width: 400px) {
  body {
    font-family: "some-font", Georgia, serif;
  }
}

Source : https://modernweb.com/solving-the-problem-of-font-face-inside-media-queries/
Modifié par _laurent (03 Mar 2019 - 19:25)

ivan750

3 Mar 2019 à 19:35

j'ai mis des media pour afficher sur ordinateur et tablette et portable etc...

et comme il faut mettre tout les css dans chaque media

je me suis dit que les icons il faut les mètres dans chaque media

mais comme tu me dit que ce n'est pas la peine et qu'il faut le mettre hors du media

ok pas de souci, c'est juste une question

ivan750

3 Mar 2019 à 19:43

mais s'il faut faire come ca



      @font-face
	  {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?qz88sw');
	  src:  url('fonts/icomoon.eot?qz88sw#iefix') format('embedded-opentype'),
	        url('fonts/icomoon.ttf?qz88sw') format('truetype'),
			url('fonts/icomoon.woff?qz88sw') format('woff'),
			url('fonts/icomoon.svg?qz88sw#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
	  }
	  
	  [class^="icon-"], [class*=" icon-"]
	  {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: none;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  }

      @media (min-width: 75em)
	  {
mon css pour afficher sur ordinateur le css qui va avec [cligne]
	  }

/*********************************************************************************************************fin du desing Respensive Ecrans ordinateurs*************************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Ecrans ordinateurs***********************************************************************************************************/

	  @media (min-width: 61em)
	  {
	  
afficher sur ordinateur le css qui va avec [cligne]
	  }

/*********************************************************************************************************fin du desing Respensive Portables et tablettes*********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portable et tablette*********************************************************************************************************/

      @media (min-width: 48em) and (max-width: 61em)
	  {

afficher sur portable et tablette le css qui va avec [cligne]

	  }

/*********************************************************************************************************fin du desing Respensive Portable et tablette***********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portable et tablette*********************************************************************************************************/

      @media (max-width: 48em)
	  {

afficher sur portable et tablette le css qui va avec [cligne]

	  }

/*********************************************************************************************************fin du desing Respensive Portable et tablette***********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portables********************************************************************************************************************/

      @media (max-width: 30em)
	  {

afficher sur portable le css qui va avec [cligne]

	  }
/*********************************************************************************************************fin du desing Respensive Portables**********************************************************************************************************************/

il faut que je fasse come et que je met le font face des icons hors des media Smiley cligne

cx'est bien ca

_laurent

Modérateur

3 Mar 2019 à 22:34

 @font-face  {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?qz88sw');
	  src:  url('fonts/icomoon.eot?qz88sw#iefix') format('embedded-opentype'),
	        url('fonts/icomoon.ttf?qz88sw') format('truetype'),
			url('fonts/icomoon.woff?qz88sw') format('woff'),
			url('fonts/icomoon.svg?qz88sw#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
}

c'est juste la déclaration de la font. Ce code ne fait rien de particulier à par déclarer un fichier de police.

Par contre le code :

[class^="icon-"], [class*=" icon-"] {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: none;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
}

C'est lui qui va faire en sorte que les icones s'affiche donc lui tu peux le placer dans les @media comme dans l'exemple que je t'ai mis. Tu fais ce que tu veux en fonction de là ou tu veux afficher les icônes. C’est juste @font-face qu'il faut sortir du @media, pas le reste.

  @font-face {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?qz88sw');
	  src:  url('fonts/icomoon.eot?qz88sw#iefix') format('embedded-opentype'),
	        url('fonts/icomoon.ttf?qz88sw') format('truetype'),
			url('fonts/icomoon.woff?qz88sw') format('woff'),
			url('fonts/icomoon.svg?qz88sw#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
}

@media (min-width: 75em) {
    [class^="icon-"], [class*=" icon-"] {
	  /* use !important to prevent issues with browser extensions that change fonts */
	  font-family: 'icomoon' !important;
	  speak: none;
	  font-style: normal;
	  font-weight: normal;
	  font-variant: normal;
	  text-transform: none;
	  /* Better Font Rendering =========== */
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
    }
 }

ivan750

3 Mar 2019 à 23:09

ca marche

il fallait le trouver celui là

merci

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Mes media suppriment mes icons font face (ie10)