Utilisation de pictogramme pour l'illustration des liens

Utilisation de pictogramme pour l'illustration des liens

La version 2.2.0 du plugin Annuaire de liens permet de choisir pour l'illustration d'un lien un pictogramme (icône) provenant d'une fonte (police de caractère) disponible dans la charte graphique.

Intégration

Chaque charte graphique utilisant des fontes, peuvent lister dans un fichier skin/[NOM_SKIN]/conf/fonts.xml le chemin (relatif) des fichiers CSS contenant des fonts.

Exemple de fichier fonts.xml

<files>  
    <!-- Configure here the CSS files containing fonts (enter the relative path from resources folder of the skin) -->  
    <!-- The CSS files should contain the @font-face rule -->  
    <!-- <file>fonts/icomoon.css</file> -->  
    <file>fonts/icomoon.css</file>  
    <file>fonts/AmetysIcon.css</file>  
    <file>fonts/FontAwesome.css</file>  
</files>  

Attention, pour être pris en compte, les fichiers CSS des fontes doivent nécessairement contenir la règle @font-face et contenir l'ensemble des fontes.

Exemple de fichier CSS qui sera correctement pris en compte

@font-face {  
  font-family: 'icomoon';  
  src:  url('icomoon.eot?3nwr9c');  
  src:  url('icomoon.eot?3nwr9c#iefix') format('embedded-opentype'),  
     url('icomoon.ttf?3nwr9c') format('truetype'),  
     url('icomoon.woff?3nwr9c') format('woff'),  
     url('icomoon.svg?3nwr9c#icomoon') format('svg');  
  font-weight: normal;  
  font-style: normal;  
}  

.icomooon-date:before{  
    font-family: 'icomoon';  
    content: "\e902";  
}  

.icomooon-faq:before{  
    content: "\ea0a";  
    font-family: icomoon;  
}  

.icomooon-mail:before{  
    content: "\e90c";  
    font-family: 'icomoon' !important;  
}  

Utilisation

Dans la fenêtre d'ajout ou modification d'un lien, cliquez sur "Pictogramme ..." dans le menu pour le choix de la vignette

Puis sélectionnez le pictogramme parmi ceux disponibles dans la charte graphique.

Si vous connaissez le nom de la classe CSS associée à l’icône recherchée, vous pouvez utiliser le filtre de recherche :

Si le menu "Pictogramme..." n'est pas visible c'est que votre charte graphique ne contient pas de CSS avec des fontes ou que votre charte n'est pas correctement configurée (voir paragraphe précédent)