Modérateur
Salut salut !

Les font-icon c'est la vie !

J'utilise plus http://fontello.com qui me permet d’insérer des icône svg perso dans les fonts (super pratique).
Déjà mis en place sur plusieurs projet (perso & pro) je suis super fan. Léger et ultra pratique pour moi ya pas a tortiller du postérieur.

Le seul inconvénient pour moi reste minime : On ne peut avoir qu'une couleur unique par icône... donc on oublie les icônes avec 2 couleurs...

Par contre on peut donner la couleur qu'on veut en 1 ligne css, c'est du svg donc scalable a l'infini sans dégradation, on y applique tout le css possible (dans les transition/animation/shadow...) etc.

Tu l'auras compris, je suis amoureux des font icon Smiley love
Il y a quelques inconvénients notables, tout de même :

- non, ce n’est pas toujours/uniquement du SVG (sinon IE8, IE9 et consorts n’afficheraient rien, et FontAwesome utilise par exemple du .otf) ;

- de (très) gros soucis relatifs aux fontes : il y a encore beaucoup de configurations qui ne reconnaissent pas / utilisent mal @font-face (dont IE9 sur WP7, Opéra Mini, et Firefox + IE peuvent poser problème lorsque le fichier n’est pas chargé depuis le même domaine) ;

- les icon-fonts sont souvent extrêmement mal implémentées : les règles d’accessibilité de base sont les mêmes que pour des images classiques : si une icône véhicule un message, un texte doit impérativement l’accompagner.

Si vous voulez tester les limites des icon-fonts, utilisez un Windows Phone 7 avec IE9, ou un Opéra Mini. Je peux vous garantir que c’est pas la panacée, et qu’un site peut devenir inutilisable uniquement parce qu’il utilise des icon-fonts.

Personnellement je reste fidèle aux sprites, plus légers, plus maniables, et qu’on peut parfaitement gérer en SVG Smiley smile

EDIT : CanIUse
Modifié par Ten (27 Jun 2014 - 11:42)
Modérateur
Yes merci Ten, a force d'avoir la tête dedans je ne la relève pas assez souvent. Smiley ohwell
Juste pour rebondir sur tes points :

Ten a écrit :
- non, ce n’est pas toujours/uniquement du SVG (sinon IE8, IE9 et consorts n’afficheraient rien, et FontAwesome utilise par exemple du .otf) ;

Oui désolé, les générateurs de font sortent tout l’attirail et prépare tout (eot ttf svg woff + css qui va bien) mais le principe reste autour du vectoriel (non ?)
Ten a écrit :
- de (très) gros soucis relatifs aux fontes : il y a encore beaucoup de configurations qui ne reconnaissent pas / utilisent mal @font-face (dont IE9 sur WP7, Opéra Mini, et Firefox + IE peuvent poser problème lorsque le fichier n’est pas chargé depuis le même domaine) ;

C'est quoi comme genre de problème ? Tu as pu en constater ? J'en ai jamais croisé et le seul truc que ça fait est que ça tombe sur une police par défaut (déclaration font-family CSS). Pour les icone c'est vrai que ca peut rajouter des caractère chelou pas très gracieux Smiley ravi mais je n'ai pas encore rencontré de problème..
Un article sympa sur le support mobile/tablette du font-face http://blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet (trouvé sur le github de fontello https://github.com/fontello/fontello)
Ten a écrit :
- les icon-fonts sont souvent extrêmement mal implémentées : les règles d’accessibilité de base sont les mêmes que pour des images classiques : si une icône véhicule un message, un texte doit impérativement l’accompagner.

Amen ! Mais bon ça c'est comme sur les image comme tu dis... même combat !
Je suis tombé sur un article sympa de Raphaël sur Font icônes et accessibilité : http://blog.goetter.fr/articles/font-icones-accessibilite/
Ten a écrit :
Si vous voulez tester les limites des icon-fonts, utilisez un Windows Phone 7 avec IE9, ou un Opéra Mini. Je peux vous garantir que c’est pas la panacée, et qu’un site peut devenir inutilisable uniquement parce qu’il utilise des icon-fonts.

[ troll ]Ca existe encore les windows phone ? Smiley lol [ /troll ]
Ten a écrit :
EDIT : CanIUse

+1 pour caniuse mais il montre quand même une belle tranche de compatibilité ! Comme souvent, tout dépend de la cible...

Merci Ten ! Smiley smile
Modifié par _laurent (27 Jun 2014 - 14:32)
Hé oui en effet, les problèmes relatifs aux icon-fonts restent marginaux ! J’ai déjà lu ces articles et de nombreux autres, sans être convaincu.

Les fontes sont bien en vectoriels, cependant contrairement à un SVG utilisé de façon classique, le rendu d’une fonte repose à la fois sur le navigateur (Firefox et Chrome présente des différences notables en la matière, par exemple) et de l’OS : chacun dispose d’un système de lissage des fontes différent (ClearType par exemple). Ça laisse quelques différences de rendu potentielles - rares mais dont il faut connaitre l’existence le jour on on en rencontre une Smiley biggrin

Concernant les problèmes de configurations, j’en constate en permanence - car oui, Windows Phone existe et c’est même plutôt populaire en fait Smiley ohwell Ça représente 5% des utilisateurs mobiles en France sur le dernier trimestre, donc c’est certes loin des 45% d’iOs et d’Androïd mais te priverais-tu de 5% de tes utilisateurs ?

Effectivement, « ça tombe sur une police par défaut ». Encore faut-il en avoir défini une dans sa font-stack, et crois-moi, beaucoup de sites (et donc, d’intégrateurs) ne le font pas. Oups, des petits carrés vides partout !

La seule solution élégante à ce problème, outre avoir défini un fallback (ne serait-ce qu’une générique comme sans-serif), est proposé par Symbolset, qui se base sur des ligatures. Pas de caractères trouvés : pas de ligature = du texte simple !

Je fais partie des 5% à utiliser un WP, et ça m’attriste tous les jours de tomber sur des sites dont je ne peux même pas percevoir la navigation, simplement parce qu’il n’y a rien derrière les icon-fonts... C’est bête, il suffit de prévoir un texte de support, une image en png, ou que sais-je encore... Il y a énormément de sites qui ne prévoient rien.

À mon sens, les icon-fonts ne doivent jamais être utilisées seules. Même si elles ne font que décorer, elles doivent décorer un élément déjà accessible.

Donc personnellement, je ne les utilise jamais, car je n’ai pas envie d’encourager un effet de mode voué à disparaître (car insensé, on parle de spécificités typographiques pour afficher de l’image, hein) qui est également très mal implémenté par de très, très nombreux « professionnels ».

Accessoirement on peut aussi faire des sprites en SVG (de plusieurs manières différentes, il y a beaucoup d’articles la-dessus aussi), ce qui réduit environ à zéro l’intérêt des icon-fonts.

PS: mais je confirme, la compatibilité et le support sont très bons - je suis extrémiste sur le sujet Smiley langue
Modifié par Ten (27 Jun 2014 - 16:35)
Merci pour vos réponses
Je vais tenter l'aventure, surtout que ma cible n'est pas mobile.

(je fais partie des 5% Smiley cligne )