Discussion :

[Blooster]

Bonjour à tous,

Je viens de terminer mon site web sur google chrome et je viens de m'apercevoir que sous internet explorer et firefox, les propriétés :before et :after ne sont pas gérées...
J'ai absolument besoin d'utiliser les îcones svg sur font awesome ou icomoon etc...

Catastrophe pour moi comment puis-je faire ?
Si quelqu'un avait la solution, j'en serai ravi !

Merci d'avance !

[Bovino]

sous internet explorer et firefox, les propriétés :before et :after ne sont pas gérées

Première nouvelle... Il faut donc que je me dépêche de les retirer car mes navigateurs me faisaient des farces en me faisant croire que ça fonctionnait.

Ou alors (mais je n'ose pas y songer sérieusement), c'est peut-être toi qui les utilise mal ?

Toujours est-il que sans code, on ne peut pas vraiment t'aider...

[Blooster]

Salut Bovino,

Excuse moi, je ne connais pas tout ce qui se fait en web ainsi que les compatibilités par coeur.
J'ai vu quelque article parlé de ça alors j'en est déduit cela.
Mais qu'importe, si effectivement cela n'est pas le problème qu'elle est-il ?

Voici mon fichier css contenant mes icônes utilisés :

Code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@font-face {
font-family: 'icomoon';
src:url('../font/icomoon.eot');
src:url('../font/icomoon.eot?#iefix') format('embedded-opentype'),
url('../font/icomoon.ttf') format('truetype'),
url('../font/icomoon.woff') format('woff'),
url('../font/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
 
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
 
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
 
 
.icon-user-alone, .icon-cancel-circle, .icon-office, .icon-switch, .icon-books, .icon-file-powerpoint, .icon-comments-alt, .icon-calendar, .icon-vcard, .icon-direction, .icon-trophy, .icon-print, .icon-support, .icon-chat, .icon-facebook, .icon-twitter, .icon-linkedin, .icon-pencil, .icon-information, .icon-signup, .icon-chat, .icon-trophy, .icon-direction, .icon-reveil, .icon-detente:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
font-size: 30px;
position: relative;
top: 5px;
}
 
.icon-plus, .icon-remove {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
font-size: 30px;
position: relative;
}
 
 
.halffont {
font-size: 20px;
position: normal;
top: 8;
}
 
 
 
.icon-user-alone:before {
content: "\e600";
}
.icon-users:before {
content: "\e601";
}
 
/* Après ce que des icones */

Et ca fonctionne à merveille sous Chrome mais Internet Explorer ainsi que Firefox, ça ne s'affiche pas...

Tu as une idée ?

Cela viendrait-il du faite que j'ai deux fichier CSS avec des icônes provenant de icomoon ?

Je ne pense pas comme Chrome fait la distinction mais bon...

Merci d'avance !

[Candygirl]

Bonjour,

Tout d'abord ::before et ::after sont des pseudo-éléments et pas des propriétés.

Ensuite tu aurais dû donner le html correspondant que l'on puisse regarder à quel type d'élément ta classe est appliquée A tout hasard je dirais un élément img; juste ?

Si c'est le cas, voici ce que dit la recommandation css2.1 à propos des pseudo-éléments ::before et ::after sur des éléments remplacés (comme les éléments img):

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Le truc c'est que la partie "selecteurs" de CSS3 est finalisée et qu'il disent ceci:

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1 [CSS21].

Donc rien de neuf et dans le working draft css4 on trouve:

The host language defines which pseudo-elements exist and their meaning. For CSS, [CSS21] defines the ::before, ::after, ::first-line and ::first-letter pseudo-elements.

En gros les navigateurs peuvent faire ce qu'il veulent et, pour l'heure, les pseudo-éléments ::before et ::after ne fonctionnent pas sur les images sur, entre autre, Firefox

[Blooster]

Bonjour Candy,

Tout d'abord merci de ta réponse claire

A tout hasard je dirais un élément img; juste ?

Perdu :p J'utilise mes icônes comme cela :

Code html :

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

<li><a href="{{ path('oil_works_app_informations')}}"><i class="icon-info"></i><span>Informations</span></a></li>

Et oui j'utilise du Symfony aussi, mais ça ne change rien.
Je ne comprends pas pourquoi mon icône ne s'affiche pas

En css j'ai bien :

Code :

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

1
2
3
.icon-info:before {
	content: "\e803";
}

Merci en tout cas Candy, je serais que maintenant j'utilise des pseudo-éléments et non pas des propriétés

[Blooster]

Ok j'ai compris mon erreur, j'avais un fichier CSS fontAwesome et Icomoon avec des icônes similaire et avec le même nom de classe ( ancienne version de fontAwesome .icon- ), ce qui fait que Chrome prenait le premier qu'il trouvait, mais IE et Firefox plantait.

Voilà merci à ceux qui m'ont aiguillé vers la solution