28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai deux questions techniques au sujet des web font icones.
Les liens dans les menus de navigation sont souvent accompagnés de petits icones.
Raphaël utilise sur son site goetter.fr des "web font icon"

html:
<a data-icon="&#65;" href="#">nom du lien</a>

css:
a:before {
  content: attr(data-icon);
  font-family: 'icon';
  ...
  ici configuration d'autres propriétés
  ...
}


On trouve facilement sur le net des explications sur cette méthode.
Mais depuis quelques semaines Raphaël a modifié la recette de la sauce et les liens de navigation sur son site ressemblent maintenant à cela:

html:
<a data-icon="&#10103;" href="#">nom du lien</a>


Vous avez remarqué ?
le code ISO &#65; se transforme en un code ou caractère que je ne connais pas &#10103; ...

Mes 2 questions:
Quel est ce type de code ou caractère ?
Quelle est la raison ? (accessibilité ?)
(Cette technique n'est pas supportée par les old ie ...)

Merci pour vos réponses Smiley cligne
Je crois que l'une des réponses c'est donnée d'elle même à la publication du message ...
Dans firebug &#10103; s'affiche sous la forme upload/42197-dataicon.jpeg

Ce petit symbole "chiffre deux" est la représentation du code ISO &#10103;

... ok mais pour quelle raison a t-il utilisé ce type de code ISO ... est-ce lié à un problème de compatibilité entre navigateurs ? ... un problème d'accessibilité ? autre ?
Bonjour,

à priori la raison principal est simplement le changement de solution utilisée : goetter.fr s'appuie sur IcoMoon.

Je suppose qu'il a attribué ses icônes à des glyphes particuliers - qui dans l'outil de dev de Chrome ressemble fichtrement à des caractères unicode.

L'astuce de ces icon-fonts ne réside pas dans le caractère employé mais dans le fichier de typographie utilisé. Voilà quelques lectures sur le sujet, si ça peut t'intéresser :

Icon Fonts are Awesome de Chris Coyier
Icon Fonts de Trent Walton
Displaying Icons with Fonts and Data- Attributes de John Hicks
ICÔNES “@FONT-FACE” ET ACCESSIBILITÉ par Raphaël Goetter
Merci pour ton aide Smiley cligne

Ce qui m'avait perturbé, ce sont ces caractères Unicode "chiffre deux" ... je m'attendais à voir s’afficher le code ISO correspondant ...

J'ai trouvé des éléments intéressants dans le lien que tu as indiqué:
icones font face et accessibilite par Raphaël Goetter

Si on lit l'article de Raphaël jusqu'au bout.
(le code ISO "&#65;" correspond au caractère "A")
Visiblement cette technique
... data-icon="&#65;" ...
est une astuce qui permet d'éviter que les synthèses vocales prononcent la lettre ... dans ce cas "A".

encore merci