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

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";
}