CSS

Je me souviens avoir acheté une superbe librairie de pictogramme en couleur, en plusieurs grandeurs, classées par thème. Le tout envoyé sur une cinquantaine de CD dans une belle petite boite en carton joliment décorée à la main. Tellement bucolique, relent de la belle époque des freak’s du fait à la main. Mais à prix fort, plus de 800 USD$ à l’époque! C’était au début du Web, au balbutiement du CSS alors que la transparence n’existait qu’avec le vieux GIF (bizarrement redécouvert par les médias sociaux 15 ans plus tard).

Le pictogramme est un langage en soi. À la manière d’un hiéroglyphe, un pictogramme permet de décrire en une seule image un concept, une action. Ils peuvent aussi être retournés, pivotés, redimensionnés, bordés, inversés et colorés. De plus, si le pictogramme est international peu importe la langue, la normalisation des pictogrammes sur le Web est très ergonomique. Une loupe pour la recherche, ou les trois lignes verticales pour ouvrir un menu caché. Parfois, c’est selon la culture, ainsi le pictogramme de la syndication RSS est devenu logiquement celui d’une connexion sans fil. Malheureusement, j’avais beau demander aux graphistes de faire des pictogrammes personnalisés, je n’en ai jamais trouvé qu’un seul capable d’en faire. Ce n’est pas donné à tout le monde de schématiser un mot, une action ou autres information, dans un petit symbole de 16 par 16 pixels ou 32, 64, etc. Avec un GIF ou le vieux .ico s’était bien pire, quoique le « favicon » des Trucsweb soit encore un bon vieux .ico tout à fait acceptable. On trouve d’ailleurs aujourd’hui des « favicons » modernes beaucoup mois défini! Enfin, les PNG de la librairie m’ont bien servi, puis se fut le tour des « sprites » jusqu’à ce que le web arrive à maturité avec le merveilleux monde du SVG.

Polices de pictogrammes

Les polices de pictogrammes contiennent des symboles et des glyphes au lieu des lettres et chiffres conventionnel. Une fois que vous avez chargé la police, vous pouvez utiliser n’importe lequel de ses pictogrammes en utilisant le nom de classe du pictogramme en question. Vous pouvez également appliquer différentes couleurs, les animer ou les redimensionner à l’aide des propriétés CSS ou encore les manipuler en JavaScript. Il existe plusieurs librairies de pictogrammes gratuites. Vous pouvez créer vous-même vos pictogrammes, mais il existe aujourd’hui plusieurs librairies professionnelles totalement gratuites dont les plus connus sont :

Font Awesome

La version 5 offre une librairie, de plus de 1553 pictogrammes vectorielles, entièrement gratuite, tant pour un usage personnel que commercial. Et plus de 7700 pictogrammes vectorielles dans sa version professionnelle. À l’origine, ils ont été développés pour Bootstrap.

Glyphicons Bootstrap

Abandonnée depuis la version 4 de Bootstrap, il s’agit d’une librairie de pictogrammes monochromes disponibles dans une matrice, en format vectoriel et sous forme de polices. Il fournit plus de 250 glyphes tout à fait gratuitement.

Pictogrammes matérielles de Google

Google fournit environ 750 pictogrammes conçus dans le cadre des « material designed guidelines » (directives de conception matérielle), connus sous le nom « Material Design icons ». Ces pictogrammes sont des symboles simples, magnifiquement conçus. À utiliser dans tous vos projets numériques, tant Android, iOS que Web. Étant donné que ces pictogrammes sont vectoriels, ils sont également évolutifs.

Bootstrap Icons Nouveauté - Décembre 2019

Bootstrap n’inclut plus la librairie de pictogrammes Glyphicons depuis la version 4, se contentant de conseiller fortement les librairies Font Awesome, Feather ou Octicons. Mais à peine un an plus tard, Bootstrap offre sa propre solution, soit Bootstrap Icons

Utiliser une librairie

Dans la plupart des cas, vous pouvez utiliser ces pictogrammes dans votre feuille de styles CSS en chargeant la libraire à partir d’un serveur distant. Sachez toute fois, que bien qu’une librairie partagée soit en principe déjà dans la mémoire cache du navigateur, enfin on l’espère, elles demandent souvent plus de ressources et de temps à charger :

<head>
  ...
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>

Ou pour un chargement plus rapide, téléchargez la librairie localement sur votre serveur, c’est-à-dire les fichiers : .eot, .woff, woff2 et .ttf. Puis dans votre feuille de style :

<style>
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* Pour IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

/* Base du pictogrammes CSS */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Grandeur de pictogramme idéale */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased; /* Navigateurs WebKit */
  text-rendering: optimizeLegibility; /* Navigateurs Safari et Chrome */
  -moz-osx-font-smoothing: grayscale; /* Navigateurs Firefox */
  font-feature-settings: 'liga'; /* Vieux navigateurs IE */
}
</style>

/* HTML */
<i class="material-icons">face</i>

Changer la couleur et les dimensions

<style>
/* Règles de dimensionnement des pictogrammes. */
.material-icons.picto-petit { font-size: 18px; }
.material-icons.picto-gros { font-size: 48px; }

/* Règles d'utilisation des pictogrammes en noir sur fond clair. */
.material-icons.picto-fonce { color: rgba(0, 0, 0, 0.54); }

/* Règles d'utilisation des pictogrammes en blanc sur fond sombre. */
.material-icons.picto-pale { color: rgba(255, 255, 255, 1); }
</style>

<i class="material-icons picto-gros picto-fonce">face</i>

Trucsweb.com

Images SVG

CSS - Pictogrammes en police vectoriels

Polices de pictogrammes

Font Awesome

Glyphicons Bootstrap

Pictogrammes matérielles de Google

Bootstrap Icons Nouveauté - Décembre 2019

Utiliser une librairie

Changer la couleur et les dimensions

Librairies

Références

Outils

Commentaires

En ligne depuis 27 ans (1997-2024)

RSS

Aider les Trucsweb

Images SVG - Trucsweb

Iconographie - Trucsweb

Bootstrap - Trucsweb

Oznog

Connexion

Connexion

Mot de passe perdu

Connexion

Conditions générales

Conditions

Responsabilité

Droit applicable et juridiction compétente

Trucsweb

Glossaire

Trucsweb

Trucsweb

Conditions

Aucun message!

Créer un compte

Créer un compte