• 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 Tags : , , , ,
  • Commentaires

    13
    Dimanche 5 Avril 2015 à 22:56

    Merci, merci, merci pour ce code ! (Que j'emprunte)

    12
    Samedi 15 Octobre 2011 à 18:28

    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 !

    11
    Samedi 15 Octobre 2011 à 18:15

    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 ?

    10
    Samedi 15 Octobre 2011 à 18:11

    OK merci . Je trouvais bien un jour xD

    Je vais suivre ton conseil .

    9
    Samedi 15 Octobre 2011 à 18:09

    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à.

    8
    Samedi 15 Octobre 2011 à 17:57

    Noir sur fond blanc .

    7
    Samedi 15 Octobre 2011 à 17:54

    Ton texte est censé être écrit en noir sur un fond blanc ou l'inverse ?

    6
    Samedi 15 Octobre 2011 à 17:47

    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 :)

    5
    Samedi 15 Octobre 2011 à 17:23

    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. :O

    4
    Samedi 15 Octobre 2011 à 17:09

    J'ai fait ce que tu as dit mais ca ne marche pas ...

    Ca un rapport avec la taille de l'image ?

    3
    Samedi 10 Septembre 2011 à 16:09

    Exactement ! Mais bon, ca m'occupe car j'ai faillit m'ennuiyer et je me suis mit au boulot :D

    2
    Samedi 10 Septembre 2011 à 16:08

    Courage, quand on veut on peut ! :D

    1
    Samedi 10 Septembre 2011 à 15:57

    Cool ! Super merci ^^

    Je suis entrain de me tapper un sale boulot à cause de ça mais bon xDD 



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :