[Résolu] problème de gestion des polices d'icones par drupal 7

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour

Je sollicite à nouveau votre aide. Lors de la création de mon site internet sur drupal 7.39, j'ai personnalisé la région header en faisant un fichier header.inc pour éviter d'avoir à recopier le code de cette zone dans chaque nouvelle page personnalisé.
Dans ce header, j'ai voulu mettre un menu social avec des icônes. Au départ, je pensé partir sur la méthode des "sprites CSS" puis j'ai changé d'avis pour utiliser les "font icon".
J'ai donc générer une police spéciale, sur icomoon pour chacune de mes icones. J'intégre mon code html dans le fichier header.inc et le css adéquat pour afficher ces polices d'icônes.
Le problème est que Drupal 7 génére anormalement plusieurs mes lignes de code html correspondant au lien hypertexte de cette icone. Au lieu d'avoir une icône Facebook dans mon menu social, je me retrouve avec plein d'icône facebook se balladant dans mon header.
Quand j'examine chaque icône dupliquée sur Firefox, je vois que mon code html a été dupliqué et placé n'importe où dans la zone.

Je ne comprend pas d'où vient ce problème, mon code html me semble correct, les classes "icon-xx" ne sont pas utilisé ailleurs. Pour moi, le soucis se trouve lorsque drupal génère la page et là, ça me dépasse complétement.

voici mon code html pour le menu social :

<nav id="menu-social" role="navigation">
<ul>
<li> <a class="icon-facebook" href="" target="_blank" title="Facebook" rel="nofollow"><span class="hidden">Facebook</span></li>
<li> <a class="icon-google-plus" href="#" target="_blank" title="Google+"><span class="hidden">Google+</span></li>
<li> <a class="icon-twitter" href="#" target="_blank" title="Twitter" rel="nofollow"><span class:"hidden">Twitter</span></li>
<li> <a class="icon-youtube" href="#" target="_blank" title="Youtube" rel="nofollow"><span class="hidden">Youtube</span></li>
<li> <a class="icon-vimeo" href="#" target="_blank" title="Vimeo" rel="nofollow"><span class="hidden">Vimeo</span></li>
<li> <a class="icon-flickr" href="#" target="_blank" title="Flickr" rel="nofollow"><span class="hidden">Flickr</span></li>
<li> <a class="icon-feed" href="#" target="_blank" title="Fluss RSS"><span class="hidden">Fluss RSS</span></li>
</ul> <!-- menu social -->
</nav>

et le css ajouté par icomoon :
@font-face {
font-family: 'champloo-icon';
src:url('fonts/champloo-icon.eot?t2qlw2');
src:url('fonts/champloo-icon.eot?#iefixt2qlw2') format('embedded-opentype'),
url('fonts/champloo-icon.ttf?t2qlw2') format('truetype'),
url('fonts/champloo-icon.woff?t2qlw2') format('woff'),
url('fonts/champloo-icon.svg?t2qlw2#champloo-icon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'champloo-icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-google-plus:before {
content: "\e600";
}
.icon-facebook:before {
content: "\e601";
}
.icon-twitter:before {
content: "\e602";
}
.icon-feed:before {
content: "\e603";
}
.icon-youtube:before {
content: "\e604";
}
.icon-vimeo:before {
content: "\e605";
}
.icon-flickr:before {
content: "\e606";
}