Fonticon

Présentation

Ce module permet d'utiliser une fonte d'icônes. Il comporte l'import de la fonte et les règles css minimales pour la mise en œuvre.

À titre d'exemple, une fonte avec deux icônes (lien externe et lien de téléchargement) est fournie dans le répertoire du module. On peut constituer sa propre fonte d'icônes à partir de fichiers svg avec des services en ligne tels que icomoon (voir cet article).

Il est recommandé de l'utiliser conjointement avec le module adobe-blank et de l'importer le plus tôt possible dans le fichier style.css pour la rendre disponible dès le début des autres règles.

Utilisation

Placer la fonte dans le répertoire des webfonts, modifier la variable du chemin pour indiquer son emplacement.

Accessibilité

Pour ne pas « polluer » la lecture de la page par les aides techniques, les icônes sont placées en css (avec la propriété :before) sur un span vide doté de l'attribut aria-hidden="true".

Exemples d’utilisation

<p><a href="#">
  <span class="icon icon-download" aria-hidden="true"></span> 
  Rapport d'activité 
  <span class="blank">Télécharger</span>
</a></p>

<p><a href="#">
  Un lien externe 
  <span class="blank">- Nouvelle fenêtre</span>
  <span class="icon icon-external" aria-hidden="true"></span>
</a></p>

À noter

Pour les icônes le Pôle intégration html de la DILA utilise plus volontiers un sprite SVG et le module svg-icons associé à du texte masqué par la class sr-only.

Les informations données dans cette rubrique correspondent à la version 1.0 release candidate de Scampi, encore en développement. Pour lire la documentation de la version courante (0.2.1), référez-vous au readme du dépôt.