§Présentation

Le prinicpe est d'illustrer un contenu (lien, item de liste, de navigation, etc.) à l'aide d'une image ou icône. Celle-ci doit soit remplacer le texte, soit se placer à sa droite, soit se placer à sa gauche.

Pendant longtemps, j'utilisais une matrice d'images ou « sprite » pour rendre ces icônes. Je remplaçais parfois les images par un symbole unicode lui correspondant mais, même si la plupart des symboles dont j'avais besoin existe, très peu de polices de caractères les implémentent. Je suis donc resté avec un système batârd ou la grande majorité des icônes étaient rendues par des images.

Et puis est arrivé la notion de police de caractères à icônes, et plus particulièrement le projet Iconic. Pourquoi celui-ci plus qu'un autre ? D'abord parce qu'il est open source, ensuite parce qu'il s'agit de la véritable source ouverte en ce sens où l'auteur fournit à la fois les images utilisées pour construire les caractères de la police et les scripts python pour construire la dite police ; on peut donc aisément l'adapter à ses besoins.

Pour modifier les caractères de la police iconic, il suffit d'éditer les images svg correspondantes, à l'aide d'Inkscape par exemple, puis de lancer le script de construction iconic_fill.py. Il faudra auparavant installer le logiciel fontforge (paquet fontforge sous Ubuntu).

Les icônes sont rendues dans les pseudo-éléments :before ou :after des éléments qui les portent puisqu'il s'agit d'illustrer un contenu(1).

§Attributs

Nom

ico

type

class

Description

classe pour afficher une icône seule

Nom

ico-txt

type

class

Description

classe pour afficher une icône suivit du texte

Nom

txt-ico

type

class

Description

Classe pour afficher le texte suivit d'une icône

Nom

ico-[a-z]+

type

(class|data)

Description

Classe spécifiant l'icône à utiliser.

<p class="(ico|ico-txt|txt-ico) ico-[a-z]+">lorem ipsum</p>

§Code HTML

<ul>
    <!-- Afficher l'icone seule -->
    <li class="ico ico-gear">Texte</li>
    <!-- Afficher l'icone avant le texte -->
    <li class="ico-txt ico-gear">Texte</li>
    <!-- Afficher l'icone après le texte -->
    <li class="txt-ico ico-gear">Texte</li>
</ul>

§Code CSS

/* ico: le texte doit être masqué */
.ico {
    display: inline-block;
    vertical-align: inherit;
    /* pb sur les navigateurs qui forcent une taille minimale */
    font-size: 0;
    overflow: hidden;
}
/* Icône portée par les pseudo-éléments */
.ico:before,
.ico-txt:before,
.txt-ico:after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    vertical-align: baseline;
}
/* Espacer l'icône et le texte */
.ico-txt:before {
    margin: 0 6px 0 0;
}
.txt-ico:after {
    margin: 0 0 0 6px;
}
/* masquer les pseudo-éléments inutiles */
.ico:after,
.ico-txt:after,
.txt-ico:before {
    display: none;
}

§Rendu à l'aide d'une image

.ico:before,
.ico-txt:before,
.txt-ico:after {
    background-image: url("path/to/sprite-icons.png");
    background-position: 20px 20px;
    background-repeat: no-repeat;
}

.ico-gear:before, 
.ico-gear:after { 
    background-position: -44px -44px;
}

§Rendu à l'aide d'une police de caractères

@font-face {
    font-family: 'MyFont';
    font-weight: normal;
    font-style: normal;
    src: url('path/to/myfont.otf') format('opentype'),
         url('path/to/myfont.ttf') format('truetype'), 
         url('path/to/myfont.svg#myfont') format('svg'),
         url('path/to/myfont.eot') format('embedded-opentype');
}
.ico:before,
.ico-txt:before,
.txt-ico:after {
    font-family: 'MyFont', sans-serif;
}

.ico-gear:before, 
.ico-gear:after { 
    content:"\2699"; 
}

§Icônes

§Actions

§Messages

• ico-info
• ico-no-entry
• ico-warn
• ico-ask
• ico-quote
• ico-quote-close
• ico-cross
• ico-check
• ico-plus
• ico-minus
• ico-pop
• ico-link
• ico-pin-off
• ico-pin-on
• ico-trash

§Documents

• ico-doc
• ico-note
• ico-book
• ico-book-open
• ico-books
• ico-comic
• ico-pic
• ico-movie
• ico-music
• ico-game
• ico-mail

§Classification

• ico-folder
• ico-folder-open
• ico-tag
• ico-bookmark
• ico-outline
• ico-list
• ico-list-item

§Contrôles

• ico-play
• ico-pause
• ico-stop
• ico-record
• ico-eject

§Temps

• ico-cal
• ico-calday
• ico-watch

§Sécurité

• ico-key
• ico-lock
• ico-unlock

§Matériels

• ico-pc
• ico-tablet
• ico-phone
• ico-tv
• ico-print
• ico-audio
• ico-photo

§Flêches

• ico-arrow-left
• ico-arrow-up
• ico-arrow-down
• ico-arrow-right

§Chevrons

• ico-chevron-left
• ico-chevron-up
• ico-chevron-down
• ico-chevron-right

§Triangles

• ico-triangle-left
• ico-triangle-up
• ico-triangle-down
• ico-triangle-right

• ico-triangle-left-w
• ico-triangle-up-w
• ico-triangle-down-w
• ico-triangle-right-w

§Carrés, losanges, cercles

• ico-square
• ico-square-w
• ico-square-d
• ico-diamond
• ico-diamond-w
• ico-diamond-d
• ico-circle
• ico-circle-w
• ico-circle-d

§Sports

• ico-football

§Météo

• ico-cyclone
• ico-sun
• ico-sun-w
• ico-cloud
• ico-cloud-rain
• ico-cloud-sun
• ico-umbrella
• ico-umbrella-rain
• ico-snowman

§Astronomie

• ico-comet
• ico-galaxy
• ico-star
• ico-telescope

§Planètes

• ico-mercury
• ico-venus
• ico-earth
• ico-mars
• ico-jupiter
• ico-saturn
• ico-uranus
• ico-pluto

§Astéroïdes / planétoïdes

• ico-ceres
• ico-pallas
• ico-juno
• ico-vesta
• ico-chiron

§Sciences / technologies

• ico-medical
• ico-chemistry
• ico-botanic
• ico-atom
• ico-radioactive
• ico-biohazard
• ico-high-voltage
• ico-poison
• ico-microscope

§Divers

• ico-flag
• ico-flag-w
• ico-justice
• ico-handicap
• ico-recycling
• ico-recycling-w
• ico-gear
• ico-work
• ico-helm

§Religions, croyances, idéologies

• ico-ankh
• ico-dharma
• ico-orthodox
• ico-peace
• ico-shamrock
• ico-yin-yang

§Jeu d'echec

• ico-chess-king
• ico-chess-queen
• ico-chess-rook
• ico-chess-bishop
• ico-chess-knight
• ico-chess-pawn

• ico-chess-king-w
• ico-chess-queen-w
• ico-chess-rook-w
• ico-chess-bishop-w
• ico-chess-knight-w
• ico-chess-pawn-w

§Jeu de cartes

• ico-suit-spade
• ico-suit-club
• ico-suit-heart
• ico-suit-diamond

• ico-suit-spade-w
• ico-suit-club-w
• ico-suit-heart-w
• ico-suit-diamond-w

§Ressources et références

§Techniques utilisées

SHEA, Dave. CSS Sprites: Image Slicing's Kiss of Death. A List Apart, 05 mars 2004. L'article référence sur le pourquoi du comment de l'utilisation des images sprite en CSS.

HICKSON, Ian. CSS3 Generated and Replaced Content Module. W3C, 14 mai 2003. 4. Pseudo-elements

DAGGETT, John. CSS Fonts Module Level 3. W3C, 28 février 2012

§Symboles unicode

NIBAU, Rui. Caractères unicodes. Omacronides, 11 septembre 2011

Miscellaneous Symbols. unicode.org

Dingbats. unicode.org

Miscellaneous Symbols and Pictographs. unicode.org

MILDE, Benjamin. Unicode block: Miscellaneous Symbols And Pictographs. shapecatcher.com, 2011

ONORI, P. J.. Iconic. Some Random Dude