Discussion :

[Lyphard]

Les amis,

Après avoir cherché et bidouiller tout mon dimanche, je me remet à vous :

Dans le but d’optimiser mon site web, j'ai voulu rassembler toutes les petites icônes en un seul sprite.

Après les avoir assemblé et disposé aux endroits approprié, le drame apparait : impossible d’en faire des boutons cliquable! il j’ai cherché partout et tout converge : pour faire les bouton on emploie des images indépendantes en utilisant <a href="www.adresse.com"><img src="image.png" alt="nom approprié" />.

Alors j’ai commencé à aller voir le code des sites (je sais, pas bien) qui emploient des icônes issues de sprites, entre autre :

http://netmacom.fr/references/la-bou...mericable.html

si vous regardez en haut à gauche, les petites icônes fb/twitter/G+/feed sont issues d’un sprite !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="spriteHead fbPictoHead"><a href="http://www.facebook.com/netmacom" target="_blank" title="Netmacom sur FaceBook">Netmacom sur FaceBook</a></li>

Donc la question est, comment faire ? je suis un peu désespéré dans mes recherches….

Bonne soirée !

[Invité]

Bonjour,

...j’ai commencé à aller voir le code des sites (je sais, pas bien) ...

Au contraire : c'est une bonne façon d'apprendre !
La touche "F12" s'avère très utile.

Normalement, si tu as fais une recherche, tu devrais avoir trouvé des éléments de réponse... : Les sprites CSS
La technique des Sprites ne date pas d'hier !

Le sprite se met en background-image de l'élément* (bouton-icone,...), dont les dimensions sont celles d'un sprite (ex. : 32x32px).

Ensuite, pour afficher le bon sprite, on modifie le background-position.


* on peut le mettre via le pseudo élément ::before, comme ici : https://codepen.io/jreaux62/pen/zvqgxR

[Lyphard]

j'y suis parvenu à le mettre en background, mais ce que je recherche est d'en faire un bouton, est-ce faisable ? au depart d'un sprite

[Invité]

Montre ce que tu as fait.

[Lyphard]

ceci est le site en question

http://www.avocat-fiscaliste-bruxelles.be/index.html

en bas les icônes sont placées avec des petites images .png

j'ai réussi à faire et coder (sur mon pc, donc pas déposé online ) le sprite de telle manière :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<footer>
            <div id="footer2">
                <div id="footer3">
                    <ul class="icone">
                        <li class="icone-1"></li>
                        <li class="icone-2"></li>
                        <li class="icone-3"></li>
                        <li class="icone-4"></li>
                        <li class="icone-5"></li>
                        <li class="icone-6"></li>
                        <li class="icone-7"><a href="legale.html">L&eacute;gale</a></li>
                        <li class="icone-7"><a href="sitemap.html">Sitemap</a></li>
                    </ul>
                </div>
            </div>
        </footer>

et

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.icone li {
    width: 36px;
    height: 30px;
    display: inline-block;
    background: url("sprite.png") no-repeat;
}
 
.icone .icone-1 { background-position: 0px; }
.icone .icone-2 { background-position: -36px; }
.icone .icone-3 { background-position: -72px; }
.icone .icone-4 { background-position: -108px; }
.icone .icone-5 { background-position: -144px; }
.icone .icone-6 { background-position: -180px; }
.icone .icone-7 { background-position: -216px; }

mais lorsque je met ce code, impossible de faire une icône cliquable pour en faire un bouton! je ne sais même pas si cela est possible

je n'ai pas ou mettre online la version avec les icônes en sprites, je peux te l envoyer si tu veux.

Merci pour ton aide!

[Invité]

Pour que ce soit cliquable, il faut un lien <a> !
Donc, il ne faut pas mettre l'icône DANS le lien.

Par ex.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <li class="icone-1"><a href="xxxxxxxx.html">&nbsp;</a></li>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.icone-1 > a { display: block; content:''; width: 36px; height:30px; background:url(...icone.......); }