Icon ne s'affiche pas sur ie 10 à cause du media

**leroilion94** · 28/02/2019, 13h59

bonjour, j'ai mis ce css pour afficher les icons

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
      @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;
	  }

il affiche bien sur google et firefox et ie10

mais quand je mets

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
      @media (min-width: 1200px)
	  {
tout les icons
 
	  }

sur ie 10, il ne s'affiche plus à causse des medias.

bien sur , j'ai mis en haut de la page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
    <meta name="viewport" content="width=device-width, initial-scale=1">

avez vous une idée ?

Invité · 28/02/2019, 19h34

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@media (min-width: 1200px)
	  {
tout les icons
 
	  }

"tout les icons" ??

Ça ne veut rien dire.

**leroilion94** · 28/02/2019, 19h41

je n'ai pas mis tout les icon pour eviter que ca soit trop long mais bon voilà

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
@media (min-width: 1200px)
	  {
      @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";
	  }
etc........
 
 
 
 
 
 
	  }

je met .icon-onglet-portail::before mais des que je met la @media (min-width: 1200px) ie 10 ne veux pas m'afficher

ma question pour quoi a votre avis

**leroilion94** · 01/03/2019, 19h59

suffit juste changer px par em dans le media

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*********************************************************************************************************début du desing Respensive Ecrans ordinateurs***********************************************************************************************************/
 
      @media (min-width: 75em)
	  {
 
	  }
 
/*********************************************************************************************************fin du desing Respensive Ecrans ordinateurs*************************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Ecrans ordinateurs***********************************************************************************************************/
 
	  @media (min-width: 61em)
	  {
 
	  }
 
/*********************************************************************************************************fin du desing Respensive Portables et tablettes*********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portable et tablette*********************************************************************************************************/
 
      @media (min-width: 48em) and (max-width: 61em)
	  {
 
	  }
/*********************************************************************************************************fin du desing Respensive Portable et tablette***********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portable et tablette*********************************************************************************************************/
 
      @media (max-width: 48em)
		  {
 
	  }
 
/*********************************************************************************************************fin du desing Respensive Portable et tablette***********************************************************************************************************/
/*********************************************************************************************************début du desing Respensive Portables********************************************************************************************************************/
 
      @media (max-width: 30em)
		  {
 
	  }
 
/*********************************************************************************************************fin du desing Respensive Portables**********************************************************************************************************************/

vous me direz si les chiffre sont bon

mais par contre les icons ne s'affiche toujours pas ;

Icon ne s'affiche pas sur ie 10 à cause du media

CSS

Vue hybride

Discussions similaires

Partager

Partager