Eklablog Tous les blogs
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

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 !

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
S
Merci, merci, merci pour ce code ! (Que j'emprunte)
Répondre
M
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 !
Répondre
N
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 !<br /> 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 ?
Répondre
N
OK merci . Je trouvais bien un jour xD<br /> Je vais suivre ton conseil .
Répondre
M
Les codes m'ont l'air pourtant bons :OJe 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ébutqui déteint sur celui-ci et l'empêche de fonctionner correctement. Essaie peut-êtrede tout enlever (En copiant tout ça quelque part) et de laisser seulement ce code-là.
Répondre