!

Systèmes de Chiffres et Représentations par des Points

Ce document rassemble les différents caractères Unicode composés exclusivement de points, ainsi que les solutions pour remplacer les chiffres de 0 à 9 par des symboles d'arités de points.

1. Caractères de points multiples (Ponctuation historique)

Ces caractères proviennent principalement des blocs Unicode Supplemental Punctuation (Ponctuation supplémentaire) et General Punctuation (Ponctuation générale).

2. Remplacement des chiffres de 0 à 9

Voici trois approches standardisées pour substituer les chiffres arabes par des combinaisons de points.

Option A : La numération Braille (Standard international)

Le système Braille utilise des matrices de points en relief. Les chiffres de 1 à 9 et le 0 correspondent aux dix premières combinaisons de la cellule Braille.

ChiffreCaractèreCode UnicodeDescription des points

0⠚U+281APoints 2-4-5

1⠁U+2801Point 1

2⠃U+2803Points 1-2

3⠉U+2809Points 1-4

4⠙U+2819Points 1-4-5

5⠑U+2811Points 1-5

6⠋U+280BPoints 1-2-4

7⠛U+281FPoints 1-2-4-5

8⠓U+2813Points 1-2-5

9⠊U+280APoints 2-4

Option B : Le code de dés (Représentation visuelle directe)

Idéal pour illustrer directement des quantités physiques jusqu'à 6 sous forme de points.

Option C : Suite de ponctuation historique (Style manuscrit)

Création d'une progression esthétique et séquentielle en utilisant les ponctuations anciennes et le Braille de transition.

Guide des solutions d'icônes en couleur pour le HTML

Les polices de caractères classiques (.woff2, .ttf) ne gèrent qu'une seule couleur unie via la propriété CSS color. Pour afficher des icônes multicolores, vous devez utiliser des technologies spécifiques.

1. Les polices d'icônes bicolores (Duotone)

Certaines bibliothèques simulent la couleur en superposant deux couches distinctes dans la police.

2. Les polices d'icônes de couleur (Color Fonts / OpenType-SVG)

Il existe un format de police (Emoji/Color Font) qui intègre directement des données vectorielles colorées ou des bitmaps (comme les émojis de votre smartphone).

3. La solution moderne : Les Sprites et Packs SVG

Pour un contrôle total des couleurs, la communauté web a abandonné les polices d'icônes au profit du format SVG.

Exemple d'intégration d'un SVG multicolore en HTML

<svg viewBox="0 0 24 24" width="48" height="48">
  <!-- Premier élément en bleu -->
  <circle cx="12" cy="12" r="10" fill="#3498db" />
  <!-- Deuxième élément en blanc -->
  <path d="M10 8l6 4-6 4V8z" fill="#ffffff" />
</svg>

Liste des catégories d'icônes dans Noto Color Emoji (Google)

La police Noto Color Emoji de Google ne contient pas d'icônes d'interface classiques (comme une disquette pour enregistrer ou une loupe pour chercher). Elle contient l'intégralité des émojis du standard officiel Unicode.

Voici les grandes catégories d'icônes disponibles, qui représentent des milliers de glyphes en couleur :

1. Smileys et Personnages

2. Animaux et Nature

3. Nourriture et Boissons

4. Activités et Événements

5. Voyage et Lieux

6. Objets du Quotidien

7. Symboles et Signaux

Comment trouver une icône spécifique ?

Comme cette police suit la norme Unicode, vous pouvez consulter la liste complète et copier les icônes directement depuis le site officiel Unicode Emoji List. Une fois collées dans votre code HTML, elles s'afficheront avec le design coloré de Google si la police Noto Color Emoji est active.

Aperçu visuel des icônes de la police Noto Color Emoji

Voici une démonstration visuelle directe des icônes en couleur de la police Noto Color Emoji, classées par catégories :

1. Smileys et Personnages

😀 😂 🤩 🥳 🧐 🤠 🤓 🤖 👽 👻 🧑‍💻 👩‍⚕️ 👨‍🍳 👮 🦸 🤹 👋 👍 🧠 ❤️

2. Animaux et Nature

🐶 🐱 🦁 🦊 🦅 🦉 🐝 🐳 🦄 🦖 🌹 🌻 🌲 🍁 🌵 ☀️ ☁️ 🌧️ ⚡ 🌙

3. Nourriture et Boissons

🍏 🍓 🥑 🍕 🍔 🍟 🍣 🍰 ☕ 🍺

4. Voyage et Lieux

🚗 🚀 ✈️ 🚲 🏠 🏢 🏰 🗼 🏔️ 🗺️

5. Objets et Technologie

💻 📱 📷 🎥 ⏰ 🔑 🔨 📚 ✏️ 💼

6. Symboles et Formes

🔴 🔵 🟢 🟡 ⬛ 🔺 🛑 ⚠️ 🔄 ➡️ 🌐

Pourquoi voyez-vous ces icônes en couleur ?

Votre navigateur système actuel (Windows, Mac, iOS ou Android) remplace automatiquement ces caractères textuels par leur équivalent visuel en couleur.

Pour forcer précisément le design graphique de Google (Noto) sur un site web HTML, on charge la police via CSS comme ceci :

<!-- Intégration dans le <head> HTML -->
<link rel="preconnect" href="https://googleapis.com">
<link rel="preconnect" href="https://gstatic.com" crossorigin>
<link href="https://googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Noto Color Emoji', sans-serif;
  }
</style>

Les Émojis Unicode vs Les Vraies Alternatives Graphiques

Vous avez totalement raison : ce sont les émojis standards Unicode que l'on retrouve sur tous les smartphones.

Pour avoir de véritables icônes de design graphiques et colorées qui ne ressemblent pas à des émojis de messagerie, il faut quitter le monde des polices de caractères et utiliser des Packs d'icônes SVG.

Voici les meilleures galeries visuelles gratuites pour vos pages HTML :

1. Lordicon (Icônes en couleur Animées ou Statiques)

Ce site propose des icônes de design professionnel dont vous pouvez modifier les couleurs directement via leur interface avant de copier le code HTML.

2. Icon Scout (Packs multi-styles)

Ils possèdent une immense section d'icônes gratuites en couleur classées par styles (3D, Flat, Doodle, Gradient).

3. Flaticon (La plus grande base de données)

Vous y trouverez des millions d'icônes créées par des designers, regroupées par "packs" cohérents (par exemple : un pack "E-commerce" avec les mêmes tons de couleurs).

Exemple de rendu : Comment intégrer une "Vraie" Icône Graphique en Couleur en HTML

Pour éviter le style "Émoji", on utilise une balise <img> pointant vers un fichier SVG coloré, ou directement le code SVG fourni par ces sites :

<!-- Exemple avec une icône de dossier cloud moderne et colorée (style Flat) -->
<svg xmlns="http://w3.org" viewBox="0 0 48 48" width="64" height="64">
  <!-- Fond du dossier en bleu ciel -->
  <path d="M40,12H24l-4-4H8C5.8,8,4,9.8,4,12v24c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V16C44,13.8,42.2,12,40,12z" fill="#42a5f5"/>
  <!-- Rabat du dossier en bleu foncé -->
  <path d="M40,16H20l-4-4H8C5.8,12,4,13.8,4,16v20c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V20C44,17.8,42.2,16,40,16z" fill="#1e88e5"/>
  <!-- Petit nuage blanc superposé au centre -->
  <path d="M28,24c0-2.2-1.8-4-4-4c-0.3,0-0.7,0-1,0.1C22.6,18.3,20.5,17,18,17c-3.9,0-7,3.1-7,7c0,0.3,0,0.7,0.1,1C10.4,25.4,10,26.2,10,27c0,2.2,1.8,4,4,4h14c2.2,0,4-1.8,4-4C32,25.4,30.3,24.1,28,24z" fill="#ffffff"/>
</svg>

Solutions d'icônes graphiques en couleur 100% Libres et Sans Inscription

Voici les meilleures alternatives open-source et totalement gratuites. Vous pouvez copier le code directement ou télécharger les fichiers SVG sans jamais créer de compte.

1. Iconify (Le catalogue open-source universel)

C'est un projet libre qui regroupe plus de 200 000 icônes issues de dizaines de bibliothèques open-source, incluant de nombreux packs en couleur.

2. OpenMoji (Le projet open-source indépendant)

Une immense bibliothèque d'icônes et d'émojis entièrement dessinés à la main par des designers et des étudiants. Le style est unique, avec des contours noirs bien définis et des couleurs vives.

3. SVG Repo (Le moteur de recherche brut)

Un outil fantastique conçu spécifiquement pour les développeurs web qui refusent les abonnements et les inscriptions. Il indexe uniquement les vecteurs libres de droits.

Démo Directe : Code HTML pour intégrer une icône en couleur via le CDN d'Iconify

Sans rien télécharger et sans inscription, vous pouvez coller ce script et cette balise dans votre fichier HTML. Le script va charger l'icône de la Terre en couleur (provenant du pack libre Flat Color Icons) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple Icône Libre</title>
    <!-- Chargement du script Iconify (Gratuit et Open-Source) -->
    <script src="https://iconify.design"></script>
</head>
<body>

    <!-- Appel direct d'une icône en couleur (Pack: Flat Color Icons, Nom: Globe) -->
    <iconify-icon icon="fc:globe" width="64" height="64"></iconify-icon>

    <!-- Autre exemple : Icône de dossier du même pack -->
    <iconify-icon icon="fc:folder" width="64" height="64"></iconify-icon>

</body>
</html>

|