-
Numéro des icons
qu'est-ce que c'est ?
Alors ceux qui sont déjà venus chercher des icones ici ont certainement du remarquer que je les ai numérotés. Ils sont tous numérotés de la même manière, comme l'exemple ci-dessous.
comment faire ?
Tout d'abord vous ouvrez votre feuille de style CSS
Apparence > Modifier le thème > Ajouter du CSS
Ensuite vous copiez/collez le code ci-dessous.ico {
padding: 0px;
float: left;
background-color: #couleur du fond qui apparaît gris clair sur l'exemple;
margin: 5px;
}
.iconame {
color: #couleur du texte;
font-family: Arial;
font-size: 11px;
text-align: center;
}Comme d'habitude, les explications !
padding c'est la taille de la bordure qu'il y a entre l'image et le fond, ici elle est réglée sur 0px mais vous pouvez bien sur changer le chiffre à votre guise. float c'est l'emplacement de votre image, là c'est left pour gauche mais vous pouvez mettre right si vous la souhaitez à droite de l'article. margin correspond à une marge extérieure qui entoure votre icon, cette marge permettra de séparer deux icons côte à côte. Dans l'exemple, 5px séparerons les icons mais vous pouvez changer la valeur si vous en avez envie.
font-family c'est la police de texte utilisée pour écrire votre numéro (Ou votre texte), là j'ai mis Arial mais vous pouvez mettre Impact ou Georgia, etc. font-size correspond à la taille de votre texte et text-align à son alignement, si vous le voulez à droite center est à remplacer par right ou bien à gauche, à remplacer par left.
Bon, c'est sympa tout ça mais maintenant on va faire du HTML.
Donc créez vite un article, cliquez sur le bouton HTML de l'interface et copiez/collez ce code<div class="ico"><img src="urldevotreimage"><br />
<div class="iconame">votre numero ou votre texte ici</div>
</div>Fermez puis enregistrer et le tour est joué !
Si vous voulez mettre plusieurs icons côtes à côtes il suffit de répeter le code autant de fois qu'il y a d'icons.
Et ce sans rajouter d'espace ou autre car la propriété margin du CSS mentionné en haut est là pour ça.
Posez toutes vos questions par commentaires, je me ferai un plaisir d'y répondre au plus vite !
Tags : text, font, icons, pouvez, cote
-
Commentaires
Non justement, l'intrêt du CSS c'est qu'il n'a pas besoin d'être répétée 36 milles fois. Il faudra juste penser à bien encadrer tout tes icons du code HTML au-dessus qui les relient au CSS. C'est le HTML qui sera répété, pas le CSS !
Bon ben j'ai trouvé . En fait, c'était la partie "commentavatar & Cie" qui génait . Donc je l'ai mise après et c'est bon !
Encore une chose . Si jamais (je pense pas que ca arrivera) je mets 40 icons dans un article . Il y aura 40 codes CSS ? ou 1 seul suffit pour les 40 ?
Les codes m'ont l'air pourtant bons :O
Je n'arrive pas à trouver ce qui ne va pas Oo"
Je n'ai pas tout tester mais à mon avis, tu as dû mettre un CSS au début
qui déteint sur celui-ci et l'empêche de fonctionner correctement. Essaie peut-être
de tout enlever (En copiant tout ça quelque part) et de laisser seulement ce code-là.Je veux bien si tu as un peu de temps . Je te mets en perm. 3
C'est ici : http://amai-akai.lo.gs/halozy-p231601
il y a deja l'image et le texte . Pour les CSS, c'est les derniers :)
Non, je ne crois pas que la taille de l'image y change quelque chose.
Si tu le souhaites je peux regarder où est le problème. :OJ'ai fait ce que tu as dit mais ca ne marche pas ...
Ca un rapport avec la taille de l'image ?
Exactement ! Mais bon, ca m'occupe car j'ai faillit m'ennuiyer et je me suis mit au boulot :D
Cool ! Super merci ^^
Je suis entrain de me tapper un sale boulot à cause de ça mais bon xDD
Vous devez être connecté pour commenter
Merci, merci, merci pour ce code ! (Que j'emprunte)